I have the following modal dialog click function
$("#foo").click(function(){$("#bar").dialog({
width: 400,
modal: true,
resizable: false,
buttons:{
"Save": function(){
$.post('remote_foo.php', $('#waka').serialize(), function(data){
$('#list').html(data);})
$(this).dialog("close");
$('.dial').val('');
$('.url').val('http://');
},
"cancel": function(){
$(this).dialog("close");
}
}//end of buttons
}).('open');//end of jquery dialog
})// end of click function
It works fine in firefox but to be honest i dont even think my click function is set up right.
1)Is this the proper way to open the dialog with a click. 2) is there a specific reason that this would not work in chrome/internet explorer? (This is the jquery ui)
No, this isn't how you should open the dialog. Take a look at this instead:
$(function () {
$("#foo").click(function(){
$("#bar").dialog('open');
});
$("#bar").dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons:{
"Save": function(){
$.post('remote_foo.php', $('#waka').serialize(), function(data){
$('#list').html(data);})
$(this).dialog("close");
$('.dial').val('');
$('.url').val('http://');
},
"cancel": function(){
$(this).dialog("close");
}
}//end of buttons
}); // end of dialogInit
})// end of document ready
Basically, you were re-initializing your dialog with every click. Instead, initialize it once on document ready, and then open/close it with your click events.
The dialog setup call on a DOM object only needs to be called once to prepare that object for the various jQuery UI-related tasks. Once prepared, you can then just use .dialog('open') and .dialog('close') and the configuration for it will persist each time.