需要在彈出窗口中顯示加載 gif，然后將其替換為 ajax 內容

Question

我有一個彈出窗口，我想通過 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 的正確數據，以便成功。

但它不會在彈出窗口中顯示它。 關於我所缺少的任何想法都會很棒。

我真正想要的是在加載 ajax 內容時在彈出內容中顯示一個加載 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' />");                
});

'shown.bs.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'>
    }
})