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

Need to display loading gif in a popover and then replace it with ajax content

本文关键字：然后 替换 内容 ajax gif 加载 窗口 显示      更新时间：2023-09-26

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

太棒了！问题解决了！

.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"是缺失的链接！（它有助于正确填充弹出框内容）

希望对某人有所帮助！

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

$('[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'>
    }
})
相关文章：