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;
});
});
$('.tTip').betterTooltip({speed: 150, delay: 300});
gdoron 2012-04-05 00:51
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).
jquery on is available from jQuery 1.7+ version onwards. If you are using previous version, you need to use jQuery live
method
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>