Как я могу отключить кэширование в содержимом qtip2 ajax

Question

У меня есть 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 в вызове Аякса. Я также попытался отключить общий кеш с $.ajaxSetup({cache: false}); до этого куска кода, но ничего.

Есть идеи, почему это не работает?

Answer 1

Ну, я не знаю, является ли это лучшим способом сделать это (на мой взгляд, было бы намного проще избежать кеширования qtip), но я решил эту проблему, если кто-то сочтет это полезным:

1. В текстовом варианте qtip просто оставьте Loading... текст, нет function()

2. Используйте событие 'show' для загрузки содержимого qtip, захвата идентификатора div, который содержит содержимое, и передачи его в пользовательскую функцию

   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);
       }); 
   }
   

Это оно!

Answer 2

Вы должны сделать несколько изменений в свойстве qtip.content.text: - вы должны "вернуть" объект $.ajax - в свойстве success $.ajax вы должны "вернуть" содержимое вместо использования api. установить функцию

для справки: http://qtip2.com/guides

Answer 3

Я опубликовал проблему GitHub, потому что у меня была та же проблема. Автор предложил установить "cache:false" на AJAX, но это все равно не сработало для меня.

Я уверен, что есть правильный способ сделать это.

Но вот еще один (и, возможно, не очень эффективный) способ решения этой проблемы: "уничтожать" qtip каждый раз, когда вы хотите обновить его AJAX-контент.

Мой код выглядит примерно так

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