How can I disable caching in qtip2 ajax content

Question

I have a qtip which content depends on other things going on in the website, so at a given time, so each time it's clicked it should retrieve new content from the server. I'm trying to use AJAX for that, as explain in qtip2's docs (see ajax example).

The problem is that I can't make it show a new version of the tip with each click, it always shows the first one, so I'm assuming it's because it has been cached.

This is my code for this:

$('#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...';
                                }
                           },

As can be seen, I set cache: false in the ajax call. I've also tried disabling the general cache with $.ajaxSetup({cache: false}); before that piece of code, but nothing.

Any ideas why this isn't working?

Answer 1

Well, I don't know if this is the best way of doing it (avoiding the qtip caching would be much easier in my opinion) but this is how I solved my issue, in case someone finds it useful:

1. In the text option of the qtip, just leave a Loading... text, no function()

2. Use the 'show' event to load the content of the qtip, grabing the ID of the div that holds the content and passing it to a custom function

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

3. This is the function that loads the content via ajax:

   function loadtQtipContent(qtip_id) {
   
       $('#' + qtip_id).empty(); //Empty the content before executing every request
   
       $.get('/my/url', function(data) { 
           $('#' + qtip_id).html(data);
       }); 
   }
   

That's it!

Answer 2

I've posted a github issue because I was having the same problem. The author suggested setting "cache:false" on AJAX, but that still didn't work for me.

I'm sure there is a proper way of going about it.

But here's another (and probably not so efficient) way of solving this issue, which is to "destroy" the qtip each time you want to refresh its AJAX content.

My code looks something like below

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

Answer 3

You have to make a few changes in your qtip.content.text property: - you have to "return" the $.ajax object - in the success property of $.ajax you have to "return" the content instead of using api.set function

for reference: http://qtip2.com/guides#content.ajax.continuous