0plus1 Blog

I’ve made this post because I got asked why this snippet gave problems:

$.ajax({
   type: "POST", url: "somepage.php",
   success: function(html){$("#someDiv").html(html).dialog();}
});

The problem with this code is that it creates a new instance of dialog each time, basically adding a new dialog div in the html for each call.
Aside from being unable to reopen the dialog after closing it, your are replicating your ajax code several times across the webpage creating all sort of problems with the jquery selectors.

The jquery-ui docs do not expalin well this issue, so to avoid headache here is the correct code:

$(function() {
   $("#someDiv").dialog({ autoOpen: false });
});

then in the ajax call:

$.ajax({
   type: "POST", url: "somepage.php",
   success: function(html){$("#someDiv").html(html).dialog('open');}
});