Jquery Cluetip - clean up between ajax loaded content
- by ted776
Hi, I'm using the jquery cluetip plugin and trying to figure out how to remove any open cluetip dialogs once i load new content via ajax. I am either stuck with the dialog boxes still showing on top of new content, or the ways i've tried to fix this actually remove all future cluetip dialogs from showing at all.
Here's my code, thanks for any help.
On dom ready i instantiate cluetip as below.
//activate cluetip
$('a.jTip').cluetip({
attribute: 'href',
cluetipClass: 'jtip',
arrows: true,
activation: 'click',
ajaxCache: false,
dropShadow: true,
sticky: true,
mouseOutClose: false,
closePosition: 'title'
});
When i'm loading new content, I have the following code. The problem i have is that $('.cluetip-jtip').empty() prevents dialog boxes from opening on any of the new content loaded in, while the destroy function doesn't remove any open dialog boxes, but just destroys the current object.
$('.next a').live("click", function(){
var toLoad = $(this).attr('href');
var $data = $('#main_body #content');
$.validationEngine.closePrompt('body'); //close any validation messages
$data.fadeOut('fast', function(){
$data.load(toLoad, function(){
$data.animate({
opacity: 'show'
}, 'fast');
//reinitialise datepicker and toolip
$(".date").date_input();
//JT_init();
$('.hidden').hide();
//scroll to top of form
$("html,body").animate({
"scrollTop": $('#content').offset().top + "px"
});
//remove existing instance
//$('a.jTip').cluetip('destroy');
//remove any opened popups
$('.cluetip-jtip').empty();
//reinitialise cluetip
$('a.jTip').cluetip({
attribute: 'href',
cluetipClass: 'jtip',
arrows: true,
activation: 'click',
ajaxCache: false,
dropShadow: true,
sticky: true,
mouseOutClose: false,
closePosition: 'title'
});
});
});
return false;
});
