Jquery Cluetip - clearing between loaded ajax content
I am using jquery cluetip plugin and am trying to figure out how to remove any open cluetip dialogs as soon as I load new content via ajax. I am either stuck with dialogs still showing on top of new content, or the ways I was trying to fix actually remove all future cluetip dialogs altogether.
Here is my code, thanks for any help.
In ready mode, I create a cluetip as shown 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 upload new content, I have the following code. The problem is that $ ('. Cluetip-jtip'). Empty () prevents dialogs from opening on any loaded new content, while the destroy function does not delete open dialogs, but simply 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;
});
+2
a source to share