CODEWITHSUNDEEP
javascriptarraysjson
user10104150
user10104150

Reputation: 43

JSON jQuery Refresh

I want to reload data via javascript/jQuery into html div id elements every second. The initial load (ready-state) works perfectly, but in the refresh (via setInterval()) doesn't. I'm just a hobbyist programmer and would be very thankful for your help.

$(document).ready(function() {
  $.getJSON('db/blackmagic/webscripts/jquery_gpio.php', function(json_php) {
      document.getElementById("jq_zeitstempel").innerHTML = json_php.jq_zeitstempel;
      document.getElementById("jq_bcm05").innerHTML = json_php.jq_bcm05;
      document.getElementById("jq_bcm06").innerHTML = json_php.jq_bcm06;

      setInterval(function() {
          $.getJSON('db/blackmagic/webscripts/jquery_gpio.php', function(json_php_refresh) {
              document.getElementById("jq_zeitstempel").innerHTML = json_php_refresh.jq_zeitstempel;
              document.getElementById("jq_bcm05").innerHTML = json_php_refresh.jq_bcm05;
              document.getElementById("jq_bcm06").innerHTML = json_php_refresh.jq_bcm06;
            }


          }, 1000);

      });
  });

Upvotes: 0

Views: 73

Answers (2)

Denis
Denis

Reputation: 178

Ex 1

In case, when you want to do the request no matter if previous was finished or not - you can wrap whole your logic in setInterval, like this:

$(document).ready(function () {
    setInterval(function() {
        $.getJSON("db/blackmagic/webscripts/jquery_gpio.php", function (json_php) {
            document.getElementById("jq_zeitstempel").innerHTML = json_php.jq_zeitstempel;
            document.getElementById("jq_bcm05").innerHTML = json_php.jq_bcm05;
            document.getElementById("jq_bcm06").innerHTML = json_php.jq_bcm06;
        });
    }, 1000);
});

Ex 2

But if you need to wait a second after previous was finished, you can do kind of recursion here.

$(document).ready(function () {
    function getJSON() {
        $.getJSON("db/blackmagic/webscripts/jquery_gpio.php", function (json_php) {
            document.getElementById("jq_zeitstempel").innerHTML = json_php.jq_zeitstempel;
            document.getElementById("jq_bcm05").innerHTML = json_php.jq_bcm05;
            document.getElementById("jq_bcm06").innerHTML = json_php.jq_bcm06;

            setTimeout(getJSON, 1000);
        });
    }

    getJSON();
});

How it works

In first example it simply calls your function every second.

In second, we wrap your function and call itself at the end of the request, after a second of waiting.

Upvotes: 1

imvain2
imvain2

Reputation: 15847

I would create a single function instead and just call that in interval.

loadjSON = function() {
  $.getJSON('db/blackmagic/webscripts/jquery_gpio.php', function(json_php) {
    document.getElementById("jq_zeitstempel").innerHTML = json_php.jq_zeitstempel;
    document.getElementById("jq_bcm05").innerHTML = json_php.jq_bcm05;
    document.getElementById("jq_bcm06").innerHTML = json_php.jq_bcm06;
  });
}

$(document).ready(function() {
  setInterval(loadjSON, 1000);
});

Upvotes: 2

Related Questions