Auto-refresh time variable (Moments TZ) - Jquery ajax

JacksonChristopher
April 25, 2021
140 views
0 votes
2 Answers

I am able to print the current time picked (Input from JSON) using the code below.

However, I need to auto update the variable named j_time every second to show a clock. Please assist.

Note: I’ve read about setinterval. I am unable to successfully implement the same as the values collected for j_time is also passed to divcontent.

        function onSuccess(data) {
            var objItems = data.d.results;
            var divContent = '<dl class="row" id="infoList">';
            for (var i = 0; i < objItems.length; i++) {
            var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
            console.log(j_time);
                divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_time + '</dd>';
            }
            $('#info').append(divContent);
        }

Answers

How will you update j_time? Do you add local data incrementing its value or from the call that returns the JSON data you use?

in the first case, you can update the DOM like:

var j_times = []; // not require initialization, but I like to do it

function onSuccess(data) {
   var objItems = data.d.results;
   var divContent = '<dl class="row" id="infoList">';
   for (var i = 0; i < objItems.length; i++) {
      var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
      j_times.push(j_time);
      console.log(j_time);
      divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_time + '</dd>';
   }
   $('#info').append(divContent);
}

setInterval(() => 
  { 
     var divContent = '<dl class="row" id="infoList">';
     for (var i = 0; i < j_times.length; i++) {
        j_times[i].setSeconds(j_times[i].getSeconds() + 1);
        divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9">' + j_times[i] + '</dd>';
     }
     $('#info').empty();
     $('#info').append(divContent);
  }, 1000);

It’s not elegant and requires that you can delete and insert the elements every second… so to update only the date you could do something like:

var j_times = []; // not require initialization, but I like to do it
function onSuccess(data) {
        var objItems = data.d.results;
        var divContent = '<dl class="row" id="infoList">';
        for (var i = 0; i < objItems.length; i++) {
        var j_time = moment.tz(objItems[i].Timezone).format("DD/MM/YYYY HH:mm:ss (Z)");
        j_times.push(j_time);
        console.log(j_time);
        divContent += '<dt class="col-sm-3">Time</dt><dd class="col-sm-9" id="infoListTime' + i + '">' + j_time + '</dd>';
        }
        $('#info').append(divContent);
    }

  setInterval(() => 
  { 
      for (var i = 0; i < j_times.length; i++) {
           j_times[i].setSeconds(j_times[i].getSeconds() + 1);
           $("#infoListTime"+i).text(j_times[i]);
      }
  }, 1000);

If what you need is to get the JSON file every second, it may prove to be inefficient due to the network delay and whatnot…

var Timer = (function () {
    function Timer(selector, timeZone) {
        this.time = moment().tz(timeZone);
        this.format = "DD/MM/YYYY HH:mm:ss (Z)";
        this.element = $(selector);
        this.meta = {
            interval: null,
            last: null,
            now: null
        }
        $(selector).data('timer', this);
    }
    Timer.prototype.start = function () {
        var _this = this;
        this.meta.last = this.meta.now = Date.now();
        this.meta.interval = setInterval(function () {
            _this.meta.now = Date.now();
            _this.time.milliseconds(_this.time.milliseconds() + _this.meta.now - _this.meta.last);
            _this.meta.last = _this.meta.now;
            _this.element.text(_this.toString());
        }, 1e3);
    }
    Timer.prototype.stop = function () {
        clearInterval(this.meta.interval);
    }
    Timer.prototype.toString = function () {
        return this.time.format(this.format);
    }
    return Timer;
}());

var timer = new Timer("#displayTime", "Asia/Kolkata");
timer.start();

// to stop
// timer.stop(); // or
// $("#displayTime").data('timer').stop();

// to get time
// timer.time; // or
// $("#displayTime").data('timer').time;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" integrity="sha512-rjmacQUGnwQ4OAAt3MoAmWDQIuswESNZwYcKC8nmdCIxAVkRC/Lk2ta2CWGgCZyS+FfBWPgaO01LvgwU/BX50Q==" crossorigin="anonymous"></script>


<div id="displayTime"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Auto-refresh time variable (Moments TZ) – Jquery ajax

Answers