jQuery Ajax request every 30 seconds

Question

I have this piece of code, but the values may change while someone is on my site. I would need to update the #finance div every 30 seconds or so. Can this be done?

$(function() {
    $.getJSON(
        "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22%5EFTSE%22)%0A%09%09&format=json&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?",

        function(json){
          $('#finance').text(json.query.results.quote.Change);
            // Patching payload into page element ID = "dog"
        });
});

Don't forget to pick an answer. Please go back to some of the 50 or so questions you've asked and accept some answers on them, too. — Surreal Dreams, Dec 15 '10 at 14:06

score 38 · Accepted Answer · edited Dec 24 '20 at 21:32

38

You can put your code in a separate function like this:

function LoadFinance()
{
    $(function() {
        $.getJSON(
        "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22%5EFTSE%22)%0A%09%09&format=json&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?",
        function(json){ $('#finance').text(json.query.results.quote.Change);
        // Patching payload into page element ID = "dog" 
        });
    });
}

And then set up a timer calling the function every 30 seconds:

setInterval( LoadFinance, 30000 );

edited Dec 24 '20 at 21:32

Dharman

30,962
25
85
135

answered Dec 15 '10 at 13:53

Alex

2,011
3
21
27

1

Don't pass a string to `setInterval()`, use a direct reference! `setInterval(LoadFinance, 30000 );` – Nick Craver Dec 15 '10 at 13:54
ouch .. `setInterval( LoadFinance, 30000 );` avoid text code that need to be evaluated. – Gabriele Petrioli Dec 15 '10 at 13:56
You're right, a direct reference would be a nicer/cleaner approach. But my suggestion above doesn't compromise security... – Alex Dec 15 '10 at 13:58
1

@Alex - actually, it does. *never* pass a string if you can avoid it. I can override your function whenever I want the way you have it, any globally defined function works. With a direct reference in it's own scope, it can't be overriden. If you're using a string because of security...you have it backwards. – Nick Craver Dec 15 '10 at 14:04
2

@Nick - Actually I normally use direct references when no parameters are required, why I chose a string in my suggestion above, was a "spur of the moment"-thing.. ;) But I see your point on security regarding the scope for the function. I'll keep it in mind. Thanks for the lesson! – Alex Dec 15 '10 at 14:18
That works a treat! Not really understanding the concept of "never pass a string" – Dec 15 '10 at 14:41
@Model - there are other things wrong with this...for instance why wrap the internals of a function inside a `document.ready` to run the check every time? Also, this doesn't fire immmediately, it waits 30 seconds before firing the first time. For the string part: tThe previous answer before the edit was passing a string, click the edit link above...or see my answer below for how to do it more efficiently overall (e.g. checking `document.ready` once). – Nick Craver Dec 15 '10 at 14:52
1

As of [this question](http://stackoverflow.com/questions/11342199/how-to-load-a-part-of-page-every-30-secons), it should be known that using `setInterval` for this kind of case is a **very** bad idea. – Florian Margaine Jul 05 '12 at 10:52
@FlorianMargaine, I did. Now that I have read the documentation, it makes better sense (go figure: reading the documentation is helpful)! Removing my comment. Thanks. – Thomas May 27 '15 at 17:45
@Thomas ah, my bad, I didn't see that in your comment. Glad you got it sorted out. – Florian Margaine May 27 '15 at 19:21

score 19 · Answer 2 · answered Dec 15 '10 at 13:52

You can set it on an interval, like this:

$(function() {
  function update() {
      $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22%5EFTSE%22)%0A%09%09&format=json&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?", 
      function(json){
        $('#finance').text(json.query.results.quote.Change);  
    });
  }
  setInterval(update, 30000);
  update();
});

setInterval() fires the first time after the interval (e.g. it first runs 30 seconds after the DOM loads here)... so for the that initial load, you still need to call it immediately as well via update().

score 3 · Answer 3 · answered Dec 15 '10 at 13:52

Absolutely:

setInterval(      
  function() {
    $.getJSON(
      "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22%5EFTSE%22)%0A%09%09&format=json&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?",

    function(json){ $('#finance').text(json.query.results.quote.Change);
    // Patching payload into page element ID = "dog" });

  },
  30000);

jQuery Ajax request every 30 seconds

3 Answers3

Linked

Related