需要在弹出窗口中显示加载 gif，然后将其替换为 ajax 内容答案

【问题标题】：Need to display loading gif in a popover and then replace it with ajax content需要在弹出窗口中显示加载 gif，然后将其替换为 ajax 内容
【发布时间】：2016-06-08 07:12:16
【问题描述】：

我有一个弹出框，我想通过 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 上提供的类似问题，但没有找到适合我的解决方案。前段时间似乎也有人问过很多类似的问题，这让我想知道我是否没有错过一些目前可用的非常明显的新功能！

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap

【解决方案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”是缺失的链接！（它有助于正确填充弹出内容）

希望对某人有所帮助！

【讨论】：

【解决方案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'>
    }
})

【讨论】：