如何等待show回调（qtip2）中的ajax函数完成？

Question

I am using qtip2 for tolltips:

function setupTolltip() {
    $("g path").each(function () {
        var path = $(this);
        var sessionId = $("#rsr").attr("data-session");
        var clientId = $("#rsr").attr("data-client");
        $(this).qtip(
            {
                content: {
                    text: function () {
                        var allPlaces = $(this).attr("data-all");
                        var freePlaces = $(this).attr("data-free");
                        var price = $(this).attr("data-price");
                        var tooltipText = "<div>All: " + allPlaces + "<br/>Free: " + freePlaces + "<br/> Price: " + price + "</div>";
                        return tooltipText;
                    }
                },
                events: {
                    show: function () {
                        var levelId = path.attr("level");
                        updateLevelInfo(path, levelId, sessionId, clientId);

                    }
                },
                position: {
                    target: 'mouse',
                    adjust: {
                        x: 10
                    }
                },
                style: {
                    classes: 'ui-tooltip-tipsy ui-tooltip-shadow',
                    tip: true
                }
            });
    });
}

When tooltip shows I make call updateLevelInfo function. This function make ajax request and updating attribute which uses qtip . The problem in that this is ajax request( I can't use $.get ) and tooltip shows before function finish executed.

Answer 1

Why don't you use the AJAX Object used in this official demo ?

You should always show a "loading" Information or Image, so there is no problem if your tooltip is shown before loading your content. (Again see Ajax Demo )

if you want to use show functionality then please use show: function(event, api) (see this example ). Then use the var api and give it into your function:

updateLevelInfo(path, levelId, sessionId, clientId, api);

Then you are able to manipulate the tooltip after doing your staff in your function!