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 postbacks, which is not really acceptable.

There is one source I've found with a workaround, but for the life of me I can't get it to work, mostly because I am not fully understanding all of the necessary steps.

I also have a workaround, which is to replace the postbacks, but it's ugly and probably not the most reliable. I would really like to make the postbacks work again. Any ideas?

UPDATE: I should clarify, the postbacks are not working because the Javascript used to execute the post backs has broken in some way, so nothing happens at all when the button is clicked.

Answer 1

All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page. That function submits the form (ASP.NET only really likes one form per page) which includes some hidden input field in which all the viewstate and other goodness lives.

On the face of it I can't see anything in SimpalModal that would screw up your page's form or any of the standard hidden inputs, unless the contents of that modal happened to come from a HTTP GET to an ASP.NET page. That would result in two ASP.NET forms being rendered into one DOM and would would almost certainly screw up the __doPostBack function.

Have you considered using the ASP.NET AJAX ModalPopup control?

Answer 2

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 3

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 4

I have found the following works without modifying simplemodal.js:

function modalShow(dialog) {

    // if the user clicks "Save" in dialog
    dialog.data.find('#ButtonSave').click(function(ev) {
        ev.preventDefault();

        //Perfom validation                

        // close the dialog
        $.modal.close();

        //Fire the click event of the hidden button to cause a postback
        dialog.data.find('#ButtonSaveTask').click();
    });

    dialog.data.find("#ButtonCancel").click(function(ev) {
        ev.preventDefault();
        $.modal.close();
    });
}

So instead of using the buttons in the dialog to cause the postback you prevent their submit and then find a hidden button in the form and call its click event.

Answer 5

FWIW, I've updated the blog post you pointed to with come clarification, reposted here - the reasoning & other details are in the blog post:

The solution (as of my last checkin before lunch):

1. Override the dialog's onClose event, and do the following:
   1. Call the dialog's default Close function
   2. Set the dialog div's innerHTML to a single  
   3. Hijack __doPostBack, pointing it to a new function, newDoPostBack

From some comments I’ve seen on the web, point 1 needs some clarification.  Unfortunately, I’m no longer with the same employer, and don’t have access to the code I used, but I’ll do what I can.  First off, you need to override the dialog’s onClose function by defining a new function, and pointing your dialog to it, like this:

$('#myJQselector').modal({onClose: mynewClose});

• Call the dialog's default Close function.  In the function you define, you should first call the default functionality (a best practice for just about anything you override usually):
• Set the dialog div's innerHTML to a single   – This is not a required step, so skip it if you don’t understand this.
• Hijack __doPostBack, pointing it to a new function, newDoPostBack

function myNewClose (dialog)

{

    dialog.close();

    __doPostBack = newDoPostBack;

}

1. Write the newDoPostBack function:

function newDoPostBack(eventTarget, eventArgument)
{

    var theForm = document.forms[0];

    if (!theForm)

    {

        theForm = document.aspnetForm;

    }

    if (!theForm.onsubmit || (theForm.onsubmit() != false))

    {

        document.getElementById("__EVENTTARGET").value = eventTarget;

        document.getElementById("__EVENTARGUMENT").value = eventArgument;

        theForm.submit();

    }
}
    

Answer 6

I have to back Tyler's approach here as the best way to fix this issue. Any other solutions seem to be just a work around.

I modified my SimpleModal's source to take in an option for the "container" element that will default to body, but allow a user of the plugin to use "form" instead. Very simple and effective. Doesn't break any old user's code etc.

If you would like my version of the plugin, send me an email:

jrseney+stackoverflow[at]gmail[dot]com

or dm me on twitter:

www.twitter.com/jasonseney

and I can send it to you. Note, I will also be in contact with the Simple Modal author to see if he can make this update.

Answer 7

thanks Tyler for your kind information.

Answer 8

Tylers way is simple and solves the issue

Answer 9

Well spotted Tyler. I've done the same thing, modified the simple modal JS source to output the modal into the element and I do now get a postback BUT it doesn't seem to connect up to the button click event (i.e. the page posts back but the code in the back-end Click function doesn't run) - any ideas?

Answer 10

The new Jquery.simplemodal-1.3.js has an option called appendTo. So add an option called appendTo:'form' because the default is appendTo:'body' which doesn't work in asp.net.

Answer 11

option {appendTo:'form'} works for me! thanks! SimpleModal is amazing!

Answer 12

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).

Answer 13

got caught out by this one - many thanks to tghw and all the other contributors on the appendto form instead of body fix. (resolved by attributes on the 1.3 version)

btw: If anyone needs to close the dialog programmatically from .net - you can use this type of syntax

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

where the javascript of closedialog is like this....

    function closeDialog() {
        $.modal.close();
    }