jQuery tooltips stop working after AJAX form submission

Go To StackoverFlow.com

0

I'm using jQuery and jQuery UI. When I submit a form ($("#compareit").submit(function(e){...), I hide my left and right columns on the page and show the AJAX results of the form submission. I'm also using some simple tooltips. The tooltips work fine prior to submitting the form...after submission, they stop working. I'm assuming it's because I'm changing the DOM. Any idea on how to get around this?

I have way too much code to post, so here is the functionality. If code would be helpful, I would be happy to post it (below)

Submit form which does an ajax call. Hide right/left columns on my page Show results on page. Tooltips stop working

The tooltip in question is: $('.tTip').betterTooltip({speed: 150, delay: 300});

$(document).ready(function(e) { 

    positions = new Array ('8' , '9');
    positions_num = 7;
    position_list = new Array(positions_num);

    $("#tabsP" ).tabs();
    $("#tooManySelected").hide();
    $('.tTip').betterTooltip({speed: 150, delay: 300});

    $("#compareit").submit(function(e){
        $("#topsection").hide();
        $("#tabsP").hide();
        $("#bottomWrap").hide(); 
        $("#error").html('');
        $("#leftcolumn").hide();
        $("#rightcolumn").hide();
        $("#yearChooser").hide();
        e.preventDefault();
        var queryString = $('#compareit').serialize();
        var dataString = queryString + "&count=" + totalselected;
        //alert(dataString);

        $.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
            }
        });
        return false; 
    });

    $( "#accordionRight" ).accordion({
        collapsible: true,
        autoHeight: false
    });
    $( "#accordionLeft" ).accordion({
        header: "h3", 
        autoHeight: false,
        navigation: true,
        collapsible: true,
        active: true
    })

    $(".btn-slide").click(function(){
        $("#ppanel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

}); 
2012-04-05 00:22
by relyt
code would be helpfu - Michal 2012-04-05 00:30
@Michal . I have posted the relevant code - relyt 2012-04-05 00:49
@relyt : Is the tool tip from the ajax content not working - Shyju 2012-04-05 00:49
@Shyju . Some of the AJAX content does become part of the tooltip. Yes. Another issue I have is that the slide panel (btn-slide click) doesn't work anymore either...and that content is just on the page (not AJAX content - relyt 2012-04-05 00:51
Write the tooltip again in the success function: $('.tTip').betterTooltip({speed: 150, delay: 300});gdoron 2012-04-05 00:51
@gdoron . Spot on! Any idea on the $(".btn-slide").click(function() above. Again, this is only a hidden div on the page that hides/shows on click. There is no AJAX content for this - relyt 2012-04-05 01:01


3

If the tool tip inside the ajax is not working, because that content you loaded after binding your method to enable the tool tip. So the tool tip function is not aware of the new elements added. So you probably need to bind that function again to the new contents loaded. You can do so in your ajax success event after loading the data

$.ajax({
            type: 'GET',
            url:'newmlbcompare2p.php', 
            cache: false,
            data: dataString,
            dataType : 'html',
            success:function(result){
                $('#ajaxDiv').html(result);
                $('.tTip').betterTooltip({speed: 150, delay: 300});

            }
});

EDIT: The same thing applies to your other events also. Like you said, your click events are not working, You probable needs to change that to use jQuery on

Change

 $(".btn-slide").click(function() {
  //do stuff
 });

to

$("#yourContainerDiv").on("click", ".btn-slide", function(event){
     //do stuff
});

on will handle current elements and future elements(like what you loaded from ajax).

http://api.jquery.com/on/

jquery on is available from jQuery 1.7+ version onwards. If you are using previous version, you need to use jQuery live method

2012-04-05 00:54
by Shyju
That totally worked and makes complete sense. Any idea on the $(".btn-slide").click(function() above. Again, this is only a hidden div on the page that hides/shows on click. There is no AJAX content for this - relyt 2012-04-05 01:00
@relyt: I updated my answer for that - Shyju 2012-04-05 01:05
Ok, you're the man. I'm using 1.7.1, so "on" works well for me. Thanks very much for your time and quick responses - relyt 2012-04-05 01:14


0

Thank you for your answer, Shyju. I had the same problem with UI Tooltip and your solution helped:

<script>
$(document).ready(function() {
    $("#dialog-window").dialog({
    autoOpen: false,
    width: 540,
    height: 200,
    modal: true,
    buttons: [
    {
    text: "OK",
    click: function() {
    $( this ).dialog( "close" );
    },
}
]
});
    $("#dialog-link").on("click", function(event){
    // post data
    $.post('submit.php', $('#formName').serialize(), function(data){
    $('#content-container').html (data);
    //  add tooltip         
    $('.tooltipClassName').tooltip({
    position: {
    my: "center bottom-10",
    at: "center top",
    using: function( position, feedback ) {
    $( this ).css( position );
    $( "<div>" )
    .addClass( "arrow" )
    .addClass( feedback.vertical )
    .addClass( feedback.horizontal )
    .appendTo( this );
    }
    }
    });
});
$("#dialog-window" ).dialog("open");
event.preventDefault();
});
});
</script>
2014-09-05 10:21
by Porta Shqipe
Ads