JSON jQuery Refresh

Question

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);

      });
  });

Are there any errors in the console? Have you used the Network tab to see if the repeated calls are being sent and what the response is? — Barmar
– Barmar, Commented Oct 23, 2020 at 19:57
It seems like you are missing a closing parenthesis for the second getJSON $.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; }) — Liron
– Liron, Commented Oct 23, 2020 at 19:58

imvain2 · Accepted Answer · 2020-10-23 20:00:00Z

2

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);
});

answered Oct 23, 2020 at 20:00

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user10104150 Over a year ago

Thank you very much!

Denis · Accepted Answer · 2020-10-23 20:13:21Z

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.

For some reason, in Ex 2 only the 'initial load' and 'first refresh' works, it does not refresh then any more.
You're welcome. I've updated the second example, because of a little mistake :)

Collectives™ on Stack Overflow

JSON jQuery Refresh

2 Answers 2

1 Comment

Ex 1

Ex 2

How it works

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Ex 1

Ex 2

How it works

4 Comments

Related