Sunday, April 8, 2012

Dialog Click listener not triggering in IE8 or Firefox with jQuery



I have this click listener and for some reason it's not triggering in IE8 or Firefox:







console.log("listener attached");



jQuery(".ui-button-text").click(function() {



console.log("this should have triggered");



var ajaxUrl = '/ajax.php?popup=true';



var dataString = "param="+param+"&param2="+param2;



// contruct the ajax request

jQuery.ajax({

url: ajaxUrl,

dataType: 'json',

data: dataString,

beforeSend: function() {

jQuery(".ui-button-text").html("Saving...");

},

complete: function() {

jQuery(".ui-dialog-content").dialog("close");

},

success:function(response){



}

});



});







So I can see the "listener attached" in the console, but I don't see the click trigger, this works in chrome, what am I doing wrong here?





Thanks!





UPDATE: I have tried using live("click", function()... instead but it's not triggering





UPDATE: So another Update, I should mention that the content of this dialog is acquired through a separate page. It's loaded with AJAX, this dynamically loaded content contains this click listener.





UPDATE: Here is the code that loads the content, please be aware I didn't actually write this piece of code, so I don't fully understand why its done the way it's done here:







<!-- START OF NEW WINDOW POPUP -->

jQuery('.option_window').click(function(){

var url = jQuery(this).attr('href');

var title = jQuery(this).attr('title');

jQuery('<div />').dialog(

{

autoOpen: false,

width: 720,

title: "Manage Code",

modal: true,

buttons:{

"Save and Return":function() {

var self = this;



var popupForm = jQuery("form.submit_on_close");

//if( jQuery("form.submit_on_close").attr('action') != '#' || jQuery("form.submit_on_close").attr('action') != '') {

if(popupForm.attr('action') != '#' || popupForm.attr('action') != '') {

jQuery.ajax({

url: jQuery("form.submit_on_close").attr('action'),

dataType: 'json',

data: jQuery("form.submit_on_close").serialize(),

success: function(data) {

data = eval(data);

if(data.resp == "success") {

var obj = jQuery('#repl_activation_row');

obj.unbind('mouseover');

if( data.property_code > 0) {

if( obj.hasClass('codeoff') ) {

obj.removeClass('codeoff').addClass('codeon');

}

} else {



if( obj.hasClass('codeon') ) {

obj.removeClass('codeon').addClass('codeoff');

}



}

}

jQuery(self).dialog('close');

}

});

}

else

jQuery(self).dialog('close');

}

},

//title:title,

open: function(event, ui){



jQuery(".ui-dialog").delay(600).queue(function(n) {

var topPos = jQuery(".ui-dialog").offset().top;

var finalPos = topPos - (jQuery(".ui-dialog").height() / 3);

jQuery(".ui-dialog").css("top", finalPos);

n();

});







var self = this;

jQuery.getJSON(url, {}, function(data){

jQuery(self).html(data);

});

},

close: function(event, ui){ jQuery(this).dialog( "destroy" ); jQuery(this).remove(); }

}).dialog('open');

return false;

})

<!-- END OF NEW WINDOW POPUP -->







And here is the link:







<a href="/popupmanager.php?code=3212&client=4432" class="actions option_window menulink">Manage</a>





Source: Tips4all

1 comment:

  1. I figured it out, I needed to attach the listener to ui-button:

    jQuery(".ui-button").live("click", function() {


    Not

    jQuery(".ui-button-text")


    I don't know why this is the case, I can't believe it took me this long to figure out, sorry guys, wish I could have given the points to one of you..

    ReplyDelete