Custom tooltip. Data loaded using Ajax

Scheduler ASP.NET MVC
#1

Hello.

I need to load some data in to custom tooltip using Ajax. My code is working fine but only if I use synchronous mode (which I don’t want to do). I wrote the code to use async data loading and I think it’s ok but nothing is shown when hovering over events. Can you please tell me why that is ? Or how to upgrade my code so this will work ?

Working code (sync)

//Custom tooltip 
    scheduler.templates.tooltip_text = function (start, end, ev) {

        var dataToPost = "{ nrOfOrder:'" + ev.text + "'}";

        var extraData;

        $.ajax({
            type: "POST",
            url: '/Scheduler/GetTooltipParameters',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            cache: false,
            data: dataToPost,
            async: false,
            success: function (data) {
                extraData = data;
            }
        })
        var tooltip_text =
            "<b>Zdarzenie:</b> " + ev.text + "<br/>" +
            "<b>Data start:</b> " + scheduler.templates.tooltip_date_format(start) + "<br/>" +
            "<b>Data koniec:</b> " + scheduler.templates.tooltip_date_format(end) + "<br/>" +
             extraData;

        return tooltip_text;
    };

Not working (async)

//Custom tooltip
    scheduler.templates.tooltip_text = function (start, end, ev) {

        var dataToPost = "{ nrOfOrder:'" + ev.text + "'}";

        $.ajax({
            type: "POST",
            url: '/Scheduler/GetTooltipParameters',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            cache: false,
            data: dataToPost


        }).done(function (data) {
            var tooltip_text = "<b>Zdarzenie:</b> " + ev.text + "<br/>" +
                                  "<b>Data start:</b> " + scheduler.templates.tooltip_date_format(start) + "<br/>" +
                                  "<b>Data koniec:</b> " + scheduler.templates.tooltip_date_format(end) + "<br/>"
                                   + data;
            return tooltip_text;

        }).fail(function (jqXHR, textStatus) {
            //Handle error here, I put an alert
            alert("Request failed: " + textStatus);
        }); //End of fail handler

    };
#2

Hi,

[code].done(function (data) {
var tooltip_text = "Zdarzenie: " + ev.text + “
” +
"Data start: " + scheduler.templates.tooltip_date_format(start) + “
” +
"Data koniec: " + scheduler.templates.tooltip_date_format(end) + “
”
+ data;
return tooltip_text;

})[/code]
here you return a value from the callback function, and tooltip never receives it (because it expects value to be returned from tooltip_text function). You can assign the response value to some variable, that is available from the tooltip_text handler. I.e. ajax will be saving data to the some variable, and tooltip_text will take the data from that variable if it’s accessible and display some placeholder if it’s not loaded yet.

Also, please note that sending ajax request right from the tooltip text template might be not the best solution. The template can be called rapidly, which will result in a big amount of requests to your server.
Probably you’ll need cache the requested data on the client somehow, in order not to load it every time scheduler redraws the tooltip(which can be very often)

#3

I wrote the code to use async data loading and I think it’s ok but nothing is shown when hovering over events. Can you please tell me why that is ? Or how to upgrade my code so this will work ?

#4

I need to load some data in to custom tooltip using Ajax. My code is working fine but only if I use synchronous mode (which I don’t want to do). I wrote the code to use async data loading and I think it’s ok but nothing is shown when hovering over events. Can you please tell me why that is ? Or how to upgrade my code so this will work ?

== www.solitairecardgame.org ==