Question

我有一个popover，我希望通过ajax填充内容。

所以我有这个：

$('.openMessagePopover').popover({
    html: true,
    content: function() {
    $threadId = $(this).data('id');
    return getContent($threadId);
    }
});

和功能：

function getContent($id)
{
    $thisData = "";
    $.ajax({
        url: $threadURL +$id,
        method: 'GET',
        success: function (data) {
            //alert(data); 
            $thisData = data;
        },
        error: function () {
            //alert("error");
            $thisData = "No message found"; 
        },
        complete:function()
        {
            alert($thisData); 
            return $thisData;
        }
    }); 
}

警报（数据）;显示URL中的正确数据，以便成功。

但它不会在popover中显示它。关于我所缺少的任何想法都会很棒。

我真正想要的是在加载ajax内容的同时在popover内容中显示一个加载gif。

这让我感到非常困惑。因为如果我将getContent函数更改为：

function getContent($id)
{
    return "<img src='/img/ajax-loader3.gif' />";
});

工作和加载gif出现在弹出窗口内容....但我不明白为什么以前的ajax调用没有？

我已经查看了SO上可用的类似问题，但没有找到适合我的解决方案。还有很多类似的问题似乎在前一段时间被问过，这让我想知道我是否错过了一些目前可用的非常明显的新功能！

Answer 1

迷死！问题解决了！

HTML：

<div class="popover-medium">
    <a href="javascript:void(0)" 
    class="icon-entypo icon-chat btn-chat multi trigger openMessagePopover"
    title="Messages"
    data-toggle="popover"
    data-placement="left" 
    data-html='true'
    data-id="2" 
    ></a>
</div>

JS：

$('.openMessagePopover').popover({
    html: true,
    content: function() {
    $threadURL= "/api/getMessagesByThreadId/";
    $threadId = $(this).data('id');
    $.ajax({
        url: $threadURL +$threadId,
        method: 'GET',
        cache: false,
        success: function (data) {
            $thisData = data;
        },
        error: function () {
            $thisData = "No message found"; 
        },
        complete:function()
        {
            return $(".popover-content").html($thisData);
        }
        }); 
    }
    })
    .on('shown.bs.popover', function() { 
    $(".popover-content").html("<img src='/img/ajax-loader3.gif' />");                
});

显示的.bs.popover＆＃39;是缺少的链接！（它有助于正确填充popover内容）

希望能帮助别人！

Answer 2

我对这个问题有一个很好的解决方案，虽然有点晚，但如果有人需要可以遵循这个解决方案。

$('[data-toggle=popover]').popover({
    html : true,
    trigger: focus,
    content: function() {
       AsyncFunctionLikeAjaxCall(some_param)
       .then(function(result){
           $(this)[0].dataset['content'] = result;
           $(this).popover('show')
       }.bind(this))
       return 'Loading..'; // or <img src='/path/to/loading.gif'>
    }
})

需要在弹出窗口中显示加载gif，然后用ajax内容替换它

2 个答案: