qtip-如何使用fullcalendar中的ajax调用将html设置为内容

时间:2017-07-16 15:25:46

标签: javascript fullcalendar qtip

我正在使用jquery fullcalendar插件,在其中我想使用qtip库显示工具提示。 工具提示内容是一个html表,其中的字段来自服务器,带有ajax调用。

我使用了fullCalendar的eventRender事件来初始化工具提示:

$('#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
            }
        })...

其中createtoolTip函数只返回要显示的html内容 但是,此代码不起作用。我检查了它确实输入了createtoolTip函数,但标题旁边的工具提示中没有显示任何文字。

0 个答案:

没有答案