Question

我有一个qtip，其内容取决于网站上发生的其他事情，所以在给定的时间，所以每次点击它都应该从服务器检索新内容。我正在尝试使用AJAX，如qtip2's docs中的解释（参见ajax示例）。

问题是我不能让它在每次点击时显示一个新版本的提示，它总是显示第一个，所以我假设它是因为它已被缓存。

这是我的代码：

$('#myButton').qtip({

                        content: { 
                            text: function(event, api) {

                                    $.ajax({ url: '/my/url', cache: false, data: {} })
                                        .done(function(html) {
                                            api.set('content.text', html)
                                        })
                                        .fail(function(xhr, status, error) {
                                            api.set('content.text', status + ': ' + error)
                                        })

                                    return 'Loading...';
                                }
                           },

可以看出，我在 ajax 调用中设置了cache: false。我也尝试在那段代码之前使用$.ajaxSetup({cache: false});禁用常规缓存，但没有。

为什么这不起作用？

Answer 1

好吧，我不知道这是否是最好的方式（在我看来，避免qtip缓存会容易得多）但这就是我解决问题的方法，万一有人发现它有用：

在qtip的文字选项中，只需保留Loading...文字，不要function()

使用'show'事件加载qtip的内容，抓取包含内容的div的ID并将其传递给自定义函数

events: {
        show:   function(event, api) {
                    var qtip_id = api.elements.content.attr('id');
                    loadtQtipContent(qtip_id);
                }
    }

这是通过ajax加载内容的函数：

function loadtQtipContent(qtip_id) {

    $('#' + qtip_id).empty(); //Empty the content before executing every request

    $.get('/my/url', function(data) { 
        $('#' + qtip_id).html(data);
    }); 
}

就是这样！

Answer 2

我发布了一个github问题，因为我遇到了同样的问题。作者建议在AJAX上设置“cache：false”，但这对我来说仍然不起作用。

我确信有一种正确的方法可以解决这个问题。

但这是解决此问题的另一种方法（可能不是那么有效），即每次要刷新其AJAX内容时“破坏”qtip。

我的代码如下所示

function setTooltips() {
  $(".myToolTips").qtip("destroy")
  $(".myToolTips").each(function(i,j) {
    $(j).qtip({
      content:{
        text:function(event, api) {
          $.ajax() // your ajax function here...
        }
      }
    });
  });
}

Answer 3

您必须在qtip.content.text属性中进行一些更改： - 你必须“返回”$ .ajax对象 - 在$ .ajax的success属性中，你必须“返回”内容而不是使用api.set函数

供参考：http://qtip2.com/guides#content.ajax.continuous

如何在qtip2 ajax内容中禁用缓存

3 个答案: