Refresh the tooltip AJAX content every time.

[ALC77]

Really a good Job!

But I have a small problem, I need the Ajax content refreshed everytime... I mean no cache... Obviusly the gettooltip cache is DISABLED.

I understand that there is a method LoadContent... but really I do not know if is the right choice and
HOW implement it... This is my code:

JS Code

$('#tooltip_id2').qtip({
        content: { url: 'gettooltip.en.aspx', data: {id:1 }, method: 'get' },
        show: 'mouseover',
        hide: 'mouseout',
        position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} },
        style: { name: 'dark', border: { width: 3, radius: 8, color: '#666666' }, width: 300,
        tip: { corner: 'bottomLeft', color: '#666666', size: { x: 20, y: 8} }
        }
    })

Thanks again and keep going with the fantastic work!

[Craig]

ALC77, loadcontent is definitely the right way to go. Luckily (or unfortuantely depending on how you look at it!) the new 1.0 release due out soon has a content.ajax.once option, which will let you specify if the AJAX content is reloaded on each tooltip show. For now however, try out this bit of functionality:

JS Code

$('#tooltip_id2').qtip({
        content: { url: 'gettooltip.en.aspx', data: {id:1 }, method: 'get' },
        show: 'mouseover',
        hide: 'mouseout',
        position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} },
        style: { name: 'dark', border: { width: 3, radius: 8, color: '#666666' }, width: 300,
        tip: { corner: 'bottomLeft', color: '#666666', size: { x: 20, y: 8} }
        },
        api: {
           beforeShow: function(){ 
              this.loadContent(this.content.url, this.content.data, this.content.method)
           }
    })

[ALC77]

Dear Craig,

JS Code

$('#tooltip_id2').qtip({
content: { url: 'gettooltip.en.aspx', data: { id: 1 }, method: 'get' },
api: { beforeShow: function() { this.loadContent('gettooltip.en.aspx', { id: 1 }, 'get'); } },
show: 'mouseover',
hide: 'mouseout',
position: { corner: { target: 'topRight', tooltip: 'bottomLeft'} },
style: { name: 'dark', border: { width: 3, radius: 8, color: '#666666' },
tip: { corner: 'bottomLeft', color: '#666666', size: { x: 20, y: 8} },
width: 300}})

It work, but only with a couple of conditions:

• The api: fire only if the api block IS NOT at the END... (for ex: before of the width)
• loadContent arguments MUST be EXPLICIT.

Am I missing something? just to understand...
Thank you again so much!

ALC.

[Craig]

ALLC77, the API block should work regardless of where it is in the object, maybe a syntax issue on your code? Also the loadContent arguments need to explicit but you can refer back to the options passed via the content object using...

JS Code

this.options.content.OPTION

..within the beforeShow function.