qtip- How to set html as content using ajax call in fullcalendar

427 Views Asked by At

I am using jquery fullcalendar plugin and within it I want to display tooltips using the qtip library. The tooltip content is an html table with fields that are coming from the server with ajax call.

I used the fullCalendar's eventRender event to initialize the tooltip like that:

$('#fullCalendar').fullCalendar({
....

        ,eventRender: function (event, element) {
        element.qtip({
            content: {
                text: function (api) {
                    $.ajax({
                        url: 'Scheduler.aspx/GetToolTip',
                        type: "POST",
                        data: JSON.stringify({ "dataid": event.id }),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    })
                    .then(function (content) {
                        var data = content.d
                        var tooltip = createtoolTip(data.IQCNum, data.Phone, data.Fax, data.NumOfEmloyees, data.Status, data.ActivityType, data.AllDetails, data.ActText, data.Address, data.EndDate);
                        // Set the tooltip content upon successful retrieval
                        api.set('content.text', tooltip);
                    }, function (xhr, status, error) {
                        // Upon failure... set the tooltip content to the status and error value
                        api.set('content.text', status + ': ' + error);
                    });


                    //return 'Loading...'; // Set some initial text
                },
                title: event.title
            },
            style: 'qtip-bootstrap', // Give it some style
            position: {
                my: 'left center',
                at: 'right middle'
            },
            show: {
                delay: 0, solo: true
            },
            hide: {
                when: 'mouseout', delay: 0
            }
        })...

where the createtoolTip function just returns the html content to be displayed however, this code does not work. I checked and it does enter the createtoolTip function but no text is shown inside the tooltip beside the title.

0

There are 0 best solutions below