1

我有一个 qtip，其内容取决于网站上发生的其他事情，所以在给定的时间，所以每次点击它都应该从服务器检索新内容。我正在尝试为此使用 AJAX，如qtip2 的文档中所述（请参阅 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...';
                                }
                           },

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

任何想法为什么这不起作用？

4

3 回答 3

2

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

  1. 在qtip的textLoading...选项中，只留下一段文字，没有function()

  2. 使用 'show' 事件加载 qtip 的内容，获取保存内容的 div 的 ID 并将其传递给自定义函数

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

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

    function loadtQtipContent(qtip_id) {

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

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

就是这样！

于 2013-11-11T02:55:19.270 回答
0

我已经发布了一个 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...
        }
      }
    });
  });
}
于 2014-03-06T05:49:04.267 回答
0

您必须对 qtip.content.text 属性进行一些更改： - 您必须“返回” $.ajax 对象 - 在 $.ajax 的成功属性中，您必须“返回”内容而不是使用 api。设置功能

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

于 2015-07-16T10:22:47.323 回答