Javascript 需要在popover中显示正在加载的gif，然后用ajax内容替换它

我有一个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' />";
}); 

函数getContent（$id） { 返回“”； }); 这是可行的，加载的gif显示在popover内容中……但我不明白为什么之前的ajax调用没有这样做

---

我已经研究了SO上提供的类似问题，但还没有找到适合我的解决方案。还有很多类似的问题似乎已经问了一些时间，这让我想知道我是否没有错过一些真正明显的新功能，目前可用

了不起！问题解决了

HTML:

JS:

$（'.openMessagePopover'）.popover({
是的，
内容：函数（）{
$threadURL=“/api/getMessagesByThreadId/”；
$threadId=$（this.data（'id'）；
$.ajax({
url:$threadURL+$threadId，
方法：“GET”，
cache:false，
成功：功能（数据）{
$thisData=数据；
},
错误：函数（）{
$thisData=“未找到邮件”；
},
完成：函数（）
{
返回$（“.popover content”）.html（$thisData）；
}
}); 
}
})
.on（'show.bs.popover'，function（）{
$（“.popover content”）.html（“”）；
});

“show.bs.popover”是丢失的链接！（这有助于正确填充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'>
    }
})

$（'[data toggle=popover]'）。popover({
是的，
触发：聚焦，
内容：函数（）{
AsyncFunctionLikeAjaxCall（某些参数）
.然后（函数（结果）{
$（此）[0]。数据集['content']=result；
$（this.popover（'show'））
}.绑定（本）
返回“正在加载…”；//或
}
})

$('.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' />");                
});

$('[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'>
    }
})