Jquery Cluetip - clean up between ajax loaded content

Posted by ted776 on Stack Overflow See other posts from Stack Overflow or by ted776
Published on 2010-04-23T11:10:35Z Indexed on 2010/04/23 11:13 UTC
Read the original article Hit count: 377

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-plugins