javascriptjquerydhtmlxdhtmlx-scheduler

dhtmlx scheduler wont render when page load asychronously (ajax page)


Im using this cool javascript scheduler. At first I load it in my page by

function get_dependencies() {
    //event calendar
    $(".myscheduler").dhx_scheduler({
        xml_date: "%Y-%m-%d %H:%i",
        date: new Date(2014, 4, 25),
        mode: "month"
    });
    scheduler.load($("body").attr("data-link") + "/core/plugins/dhtmlcalendar/events.xml");
}

and then call the function

$(window).load(function(){
   get_dependencies();
});

and then when any of navs is click (navs associated with the ajax page stuff) call the page and render the scheduler again

$.ajax({
    url: '/ajax-page',
    type: 'post',
    dataType: 'html',
    beforeSend: function () {
        $("#loading").show();
    },
    data: {
        page: this_tab_content_link,
        _token: $("body").attr("data-token")
    },
    success: function (data) {
        $(".active_tab_content").html(data);
        if ($(this).hasClass("reload_dependencies")) {
            get_dependencies();
        }
        $("#loading").hide();
    }
});

but sadly the scheduler, didn't render (no calendar scheduler is showing) after the html data (the ajax page response) is put in to the specified container. Any ideas, help, suggestions, recommendations, help?


Solution

  • Set relevant context to ajax callback, this in your code is jqXHR option object. Set ajax option context to this:

    $.ajax({
        context: this,
        /*...*/
    });