Ken's Blog | JQuery UI Dialog and ASP.Net button postbacks

Wednesday, 11. November 2009

JQuery UI Dialog and ASP.Net button postbacks11/11/2009 11:40 PM

When you use JQuery UI's Dialog plugin to bring up a div as a dialog, it usually pulls the div out of the form to do this and then ASP.Net elements don't work. I found this clean solution to this from Ravi's Software+Usability Blog:
In your dialog creation code, add an open event handler:
$('#divDialog').dialog({
bgiframe: true, autoOpen: false, height: 175,
width: 600, minWidth: 200, modal:true,
open: function(type,data) {
$(this).parent().appendTo("form");
},
close: function(type,data) {
$(this).parent().replaceWith("");
}
});
This will bring the ASP.Net elements back inside the form so they can post back to the ASPX page properly.

Note: added the close event handler to get rid of the duplicate <div> thanks to Carl's comment below.

Comments :

1. Ray08/26/2015 19:35:10

I ran into this issue while working on a Java web application, and found the latest version of jQuery lets you set "appendTo" during dialog initialization. This worked for me. Doing it this way avoided the need for the open or close functions described above. For example:

$( "#theDialogId" ).dialog({
autoOpen: false, width: 700, appendTo: "#theFormId", etc....

2. ken04/10/2013 21:17:13

thanks, Carl...I updated the blog entry. Surprised you didn't link your blog post back to mine for attribution :-P

3. Carl Bartlett04/10/2013 17:01:18
Homepage: http://webmisterradixlecti.blogspot.com

Hi Ken

Thanks for the help, but you forgot to wire a function to the Close event that removes the Div from the form. If you donâ€™t do this then opening the Modal Dialog and closing it without submitting will create duplicates of your Div including the ASP.Net elements.

It took me a while to figure out why I was getting comma separated duplicate entries, so I would recommend updating your post to help as many as you can.

Check out my blog post to see how I did this. { Link }

4. Andres Villanueva04/10/2013 04:49:54

Gracias me sirvio de mucho! Ya estaba cansado de leer posts sin encontrar una solucion.

5. J01/08/2013 12:26:10

Thank you!! This was on page 3 on Google. Should've been top one in the results!

6. Evan 11/21/2012 16:50:16

Very Useful Thanks!

7. selam11/15/2012 20:31:01

that was so useful!! God bless u!

8. Prakash06/25/2012 12:09:29

Thanks, that was really helpful

9. Carl Howarth05/12/2011 09:42:31

Thank you sooooo much!

I have spent the morning messing around with nested updatepanels and never even considered that it may have been the JQ Dialog that was messing with me.

10. Dun07/14/2010 15:06:41

You've just earned a medal from me. Any idea what to with UpdatePanel inside Dialog? Or should I make it more simple and just Iframeit there...?

11. Martijn Duiveman04/29/2010 15:43:13

Thanks, this really helped me. I had a situation where multiple dialogs were on the page and because the inline function only runs when the dialog is opened, it does not conflict with the other dialogs. Thanks again.

Martijn