Jquery refreshing multiple variables

Question

I am having a very hard time finding a good resources or any idea on how to accomplish the following:

Using jquery get some data

1. Use jquery to fetch some data. Now what syntax should the data be in. Go to step 2.
2. Again using jquery, assign that data to multiple variables and tags on the html page. I know how to replace 1 tag. But I wanna refresh multiple divs, tags, ids. Go to step 3.
3. Now go back to step 1 after some time.

I have tried my friend GOOGLE but it can't find the pages that I am looking for. I would really appreciate some code here but a link to a tutorial wouldn't be too bad either.

Answer 1

1) $.ajax() seems like a good idea, use it to fetch data in the JSON-format:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback //Assign data and stuff here
});

2) Do that in the success-parameter, as a new function. success: function() {}

success: function() {
    $('div#1').html('foo');
    $('h1#1').html('woo');
}

3) Wrap your $.ajax()-call in an interval:

var refresh = setInterval(function()
$.ajax({
      url: url,
      dataType: 'json',
      data: data,
      success: callback //Assign data and stuff here
     });
 }, 60000);

Edit (response to the comment below):

Try doing it the following way, as you're not usin a function() as a callback:

function() { 
    $.ajax({ 
        url: "/admin/ajax/all_data.php", 
        dataType: 'json', 
        data: data, 
        success: function(data) {
            $("#testdiv1").html(data.testdiv1); 
            //$("#testdiv2").html(data.testdiv2); 
            //$("#testdiv3").html(data.testdiv3); 
        }
    }); 
}), 2000);

Let me know if this works out for you.

Answer 2

1 - See $.ajax and associated high level wrappers such as $.get, $.post, $.load and $.getJSON.

2 - If your server sends JSON to the client and the client understands how to use it, this is trivial. e.g.:

// json from server
{ "newsDiv" : "some html", "imagesDiv", "some html" }

// assuming it is stored in the variable 'data'
$("#newsDiv").html(data.newsDiv);
$("#imagesDiv").html(data.imagesDiv");

3 - setInterval is your friend.

Answer 3

Then check out the jquery 'load' function here. With this, you can load data from a server and place it into the matched html element. Very clean and simple. Then, have a look at how to implement a timer here

I can't see what more you will need