Making jQuery UI’s Dialog Work With ASP.Net

by Nicholas Head 25. June 2009 22:06

You might have come across this problem in your travels, I know I have. Basically if you’re using jQuery UI’s Dialog and have a <form runat=”server”> inside of that dialog, your postback is not going to work. What’s going on?

jQuery UI is taking the dialog DIV content and moving it outside of the <form runat=”server”> tag. This makes your postback no longer function as expected.

Luckily we can fix this fairly easily with jQuery itself.

var dlg = $('#divMyDialog').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400,
                    resizable: false,
                    overlay: {
                        background: "black",
                        opacity: 0.5    
                    }
                });
dlg.parent().appendTo(jQuery('form:first'));

The special logic lies in the last line—using the reference to our created dialog, we get the parent container and move it back to the first <form> on the page. After that, all is well.

f8710b75-423a-4f1e-85ee-8362e99441bf|1|5.0

Tags: jquery, asp.net

7/16/2009 2:15:16 PM #

You just saved my life today. I knew this needed to be done but the ''form:first'' selector was the key, thanks a million. Now I need to be able to have the dialog load another aspx page through ajax and then wire up its postsbacks to only submit inside the dialog and not redirect the parent page. Any thoughts on that?

Tim Santeford | Reply

7/16/2009 2:42:41 PM #

Tim,

There's no easy way to do that off the top of my head.. what I've done in the past is stuck an <iframe> inside of the jQuery UI Dialog, kinda cheated a bit.

Nicholas | Reply

8/6/2009 10:48:44 PM #

Thnaks for the solution... You just saved my life today.

Hasika Mahindaratha | Reply

1/23/2010 4:17:30 AM #

Thanks a lot, to make my life easier...

Regards

Salman Farsi | Reply

4/28/2010 1:54:32 AM #

Hi,

I have an issue with this method. When i create one dialog and move it under the <form> everything is fine..
But when i create two dialogs and move both under the <form>, just the last one respond to events..

I checked the generated code, and i saw the both dialog with different IDs, but just the last one added is fine !

Help me please.

Regards

FREMONT | Reply

4/28/2010 7:12:10 PM #

You need to change the last part:

jQuery('form:first')

To reference your actual form, probably via ID. Make sure your <form> tag has an ID, like:

<form id="MyForm">

And then you can do this:

jQuery('#MyForm')

Hopefully this helps you out.