jQuery UI Tooltip小部件中的AJAX内容

san*_*mai 27 ajax jquery jquery-ui

jQuery UI 1.9中有一个新的Tooltip Widget,其API文档提示可以在其中显示AJAX内容,但没有任何进一步的细节.我想我可以用同步和阻塞请求来完成类似的事情,但这不是我想要的.

如何使其显示使用异步AJAX请求检索的任何内容?

ZHA*_*ong 59

这是我的博客中的 jqueryui tootip小部件的ajax示例.hope它有帮助.

$(document).tooltip({
    items:'.tooltip',
    tooltipClass:'preview-tip',
    position: { my: "left+15 top", at: "right center" },
    content:function(callback) {
        $.get('preview.php', {
            id:id
        }, function(data) {
            callback(data); //**call the callback function to return the value**
        });
    },
});
Run Code Online (Sandbox Code Playgroud)


sla*_*pon 17

这显然不是一个完整的解决方案,但它显示了在open事件期间动态获取数据的基本技术:

$('#tippy').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
        var elem = $(this);
        $.ajax('/echo/html').always(function() {
            elem.tooltip('option', 'content', 'Ajax call complete');
         });
    }
});
Run Code Online (Sandbox Code Playgroud)

小提琴