Dhtmlx Scheduler is not being update in TimeInterval

Question

I've set setInterval to update my scheduler. I'm getting data from server in JSON format. But Scheduler is not getting update if I used json data, But if I put static values it works fine. Following is my code.

// It doesn't work

setInterval(function() {

   $.post('ajax_comet.php',{sectionIds:sectionIds},function (data){
    if(data.processing.length>0)
    {
        for(var i=0;i<data.processing.length;i++)
        {
            var startdt=data.processing[i].start_interval.split(",");
            var endt=data.processing[i].end_interval.split(",");
            var month=parseInt(startdt[1])-1;
            var start=startdt[0]+","+month+","+startdt[2]+","+startdt[3]+","+startdt[4];
            var end=endt[0]+","+month+","+endt[2]+","+endt[3]+","+endt[4];
            var section="'"+data.processing[i].section_id+"'";
            console.log(start);
            console.log(end);
            scheduler.addMarkedTimespan({
                            start_date: new Date(start),
                            end_date: new Date(end),
                            css: "inprocess",
                            sections: {
                                unit: section
                            }
                    });

                    scheduler.updateView();
        }

Same TimeInterval with static data works fine.

// This works properly.

setInterval(function() {

   $.post('ajax_comet.php',{sectionIds:sectionIds},function (data){
    if(data.processing.length>0)
    {
        for(var i=0;i<data.processing.length;i++)
        {
            var startdt=data.processing[i].start_interval.split(",");
            var endt=data.processing[i].end_interval.split(",");
            var month=parseInt(startdt[1])-1;
            var start=startdt[0]+","+month+","+startdt[2]+","+startdt[3]+","+startdt[4];
            var end=endt[0]+","+month+","+endt[2]+","+endt[3]+","+endt[4];
            var section="'"+data.processing[i].section_id+"'";
            console.log(start);
            console.log(end);
            scheduler.addMarkedTimespan({  
                            start_date: new Date(2013,11,29,01,00),
                            end_date: new Date(2013,11,29,01,30),
                            css: "inprocess",
                            sections: {
                                unit: 'a7b6e635-f62f-6f12-020f-52a959d1ca47'
                            }
                        });

                    scheduler.updateView();
        }
    }
  },'json');

}, 5000);

        }
      },'json');

    }, 5000);

Answer 1

If it works with the static data, that means that dynamic data either comes wrong or is parsed wrong on the client.

Make sure that dates and section are correct. For example, in this code, where you collect a date string from the ajax values and check this string in console:

var start=startdt[0]+","+month+","+startdt[2]+","+startdt[3]+","+startdt[4];
var end=endt[0]+","+month+","+endt[2]+","+endt[3]+","+endt[4];

console.log(start);
console.log(end);

It would be more informative if you check the resulting date, that is passed to the scheduler API.

console.log(new Date(start));
console.log(new Date(end));

Date string might have some non-obvious error which results in invalid date object.

Secondly, the code that collects the dates is rather complex. I'd suggest to use a simplier format for transfering dates from the server(for example use unix timestamp), or to define some helper function for parsing them.

FYI, scheduler library includes scheduler.date object that defines methods for working with dates. So you can define parse function like following. That leaves much less space for typos and accidental errors. Not quite sure that I've specified the correct date format, but you can change it if it's necessary

var parseDate = scheduler.date.str_to_date("%Y, %m, %d, %H, %i");

var start = parseDate(data.processing[i].start_interval),
    end = parseDate(data.processing[i].end_interval);

One particularly suspicious line is where you retreive id of the section:

var section="'"+data.processing[i].section_id+"'";

I think you add extra quotes to the section id here. I mean var section will be equal to "'a7b6e635-f62f-6f12-020f-52a959d1ca47'" , while in your static code you use "a7b6e635-f62f-6f12-020f-52a959d1ca47" - without extra quotes

One more thing. You call scheduler.updateView() each time timespan is added. Since this command triggers complete redraw of the calendar, it's better to call it only once when the loop is finished.

UPDATE:

here is the code sample. Didn't actually run it, but i hope it clarifies the text above

setInterval(function() {
    var parseDate = scheduler.date.str_to_date("%Y, %m, %d, %H, %i");// parse string of specified format into date object

    $.post('ajax_comet.php',{sectionIds:sectionIds},function (data){
        if(data.processing.length>0)
        {
            for(var i=0;i<data.processing.length;i++)
            {
                var timespan = data.processing[i];

                var start = parseDate(timespan.start_interval),
                    end = parseDate(timespan.end_interval),
                    section = timespan.section_id;

                console.log(start);
                console.log(end);
                scheduler.addMarkedTimespan({
                    start_date: start,
                    end_date: end,
                    css: "inprocess",
                    sections: {
                        unit: section
                    }
                });
            }
            //update calendar after loop is finished
            scheduler.updateView();
        }
    },'json');

}, 5000);