SimpleModal breaks ASP.Net Postbacks

Question

I\'m using jQuery and SimpleModal in an ASP.Net project to make some nice dialogs for a web app. Unfortunately, any buttons in a modal dialog can no longer execute their po

Answer 1

Both of you were on the right track. What I realized is that SimpleModal appends the dialog to the body, which is outside ASP.Net's <form>, which breaks the functionality, since it can't find the elements.

To fix it, I just modified the SimpleModal source to append eveything to 'form' instead of 'body'. When I create the dialog, I also use the persist: true option, to make sure the buttons stay through opening and closing.

Thanks everyone for the suggestions!

UPDATE: Version 1.3 adds an appendTo option in the configuration for specifying which element the modal dialog should be appended to. Here are the docs.

Answer 2

In addition to tghw's answer, this excellent blog post helped me: jQuery: Fix your postbacks in Modal forms -- specifically BtnMike's comment: "You also must not have CssClass=”simplemodal-close” set on your asp:button." Taking that off the class was the not-obvious-to-me solution.

-John

Answer 3

Web browsers will not POST any disabled or hidden form elements.

So what's happening is:

1. The user clicks on a button in your dialog.
2. The button calls SimpleModal's close() method, hiding the dialog and the button
3. The client POSTs the form (without the button's ID)
4. The ASP.NET framework can't figure out which button was clicked
5. Your server-side code doesn't get executed.

The solution is to do whatever you need to do on the client (closing the dialog in this case) and then call __doPostback() yourself.

For example (where "dlg" is the client-side SimpleModal dialog reference):

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

That should hide the dialog, submit the form, and call whatever server-side event you have for that button.

@Dan

All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page.

asp:Buttons do not call __doPostback() because HTML input controls already submit the form.

Answer 4

Had the same problem, but {appendTo:'form'} caused the modal popup to be rendered completely wrong (as though I had a CSS issue).

Turns out the template I'm building on top of has includes that put other forms on the page. Once I set {appendTo:'#aspnetForm'} (the default Asp.net form ID), everything worked great (including the postback).