JQuery UI dialog ASP.NET postback problem

August 24, 2011 | Posted by: Fredrik | Tags: Javascript, ASP.NET, Troubleshooting, jQuery, Snippet
I you're trying to use the jQuery UI dialog function together with ASP.NET form postback you might be in for a suprise. Most likely that suprise is that the fields will be returned empty to your server side code. And that would be a rather big problem.

The reason for this is that the dialog function pulls your element and puts it in a window container which are placed outside the Form tag. And therefor if you do a postback directly from the dialog the input fields in the dialog are not included in the data that is posted to the server.

But there's an easy way to solve this. And that is to add a line to your javascript code that move the dialog window back into the Frame element.

var myDialog = jQuery("#myDialog").dialog({ width: 480, height: 400 });
      

// This is where the magic happens :)
myDialog.parent().appendTo(jQuery("form:first"));

Or if you're more into one liners, here you go:
jQuery("#myDialog").dialog({ width: 480, height: 400 }).parent().appendTo(jQuery("form:first"));
      

Comments

comments powered by Disqus