JQuery Each setInterval Repeat Problem

Question

I'm using a set interval function with jQuery to loop through a list of times on a calendar so that the individual divs can be refreshed. First I put this code on a page that was called via Ajax, but the function would never receive the new date variable set. It would just recognize the variable it saw when the page was first loaded.

Then I added the code to a click event on the main page, but then every time I selected a new date, the function would just run again, using the first date and then the second.

    $date = $_GET['date'];

    jQuery(function() {

    var data = {'9:30','10:30'};

    var date1 = $date;

 $.each(data, function(key, date1) {

   $("#"+key).load(\'cal.php?a=appointment&time=\'+key+\'&date=\'+date1+\'&x=\' + (new Date()).getTime());

  var refreshId = setInterval(function() {
    $("#"+key).load(\'cal.php?a=appointment&time=\'+key+\'&date=\'+date1+\'&x=\' + (new Date()).getTime());
  }, 9000);

 });

Answer 1

Look like you are 'over-escaped' some of strings. Try this code:

$date = $_GET['date'];

function Callback(key, data)
{
    $("#"+key).load("cal.php?a=appointment&time=" + key + "&date=" + date1 + "&x=" + new Date().getTime());
}

jQuery(function() {

var data = {'9:30','10:30'};
var date1 = $date;

$.each(data, function(key, date1) {

    Callback(key, data1);

    var refreshId = setInterval(function() {
        Callback(key, data1);
    }, 9000);

});