Wednesday, April 10, 2013

ASP.NET Postback in jQuery UI Modal Dialog


Why is the postback not working?


When you use the jQuery UI Modal Dialog it pulls the referenced Div out of the form to create the Modal Dialog. As a result  ASP.Net elements such as the asp:Button and asp: TextBox will not function as they need to be in the form for your code behind to access them and the postback to work.

How do we fix it?


The easiest fix is to simply add the Div back to the form. In the code sample below, you will see that I have wired a function to the Open event of my ShowPannelInDialog method that appends the Div to the form.

Code:
<script type="text/javascript">
        function ShowPannelInDialog(PannelID, title) {
            $("#" + PannelID).dialog({
                title: title, 
                modal: true,
                open: function(type, data) { $(this).parent().appendTo("form");  },
                close: function (type, data) { ($(this).parent().replaceWith("")); }
        });
            return false;//prevent hyperlink from going to new page
        }
</script>

<div style="display:none" id="PopupBox">
Cost Name : <asp:TextBox ID="TxtDescription" runat="server"></asp:TextBox>
<asp:Button ID="BtnSubmit" runat="server" OnClick="BtnSubmit_Click" Text="Submit" />
</div>
<a onclick="showPannelInDialog('PopupBox','Title goes here');" href="#">Open Popup</a>

I have also wired 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.


Did this post help you? Please let me know in the comments or use the buttons below to share it with your social network.

13 comments:

  1. .appendTo("form") fixed my issues with postback, but why do the dialogs close when the form inside of the dialog, is posted? It's frustrating...I need the dialog to remain open. If I click the link that launched the dialog to begin with, I can see that the form posted, as the results are still visible in the dialog. How can I keep it open?

    ReplyDelete
    Replies
    1. Hi Anon, The Dialog is closing on form submit because of the postback. If you don’t want the popup to close on submit, then I would recommend using jQuery.ajax() to save your data instead of a form submit.

      Delete
    2. On open add a flag to the viewstate, on load again if viewstate is not nothing/null then show the dialog. Then you can have it persist between postbacks. Then kill the viewstate item on a close action.

      Delete
  2. the $(this).parent().appendTo("form") code appears to be putting the whole dialog area in modal mode where you cant click the fields or buttons. Even the dialog close button is un-clickable. Any ideas?

    ReplyDelete
    Replies
    1. Apparently you have to change the z-index of the ui-dialog style to .ui-dialog
      {
      z-index: 101;
      }

      Delete
    2. Gota hate those sneaky layering issues.

      Delete
    3. Thanks Carl and Mr/Mrs Unknown!

      Delete
  3. GREAT!!!! THANK YOU MY FRIEND!!
    THANK YOU
    THANK YOU
    THANK YOU
    THANK YOU
    THANK YOU

    ReplyDelete
  4. I have a question, this is my code, the coment it's only not working, help me please


    $("[id$=core_btn_Dependientes]:not(:disabled):not([readonly])").click(function (evento) {
    $("#dialogo_Dependientes").dialog({
    modal: true,
    title: "Dependientes del solicitante",
    width: 750,
    height: 360,
    resizable: false,
    hide: { effect: 'scale', duration: 500 },
    //show: { effect: 'fold', duration: 500 },
    open: function (type, data) {
    $(this).parent().appendTo("form:first");
    },
    close: function (type, data) {
    ($(this).parent().replaceWith(""));
    }
    });
    return false; //prevent hyperlink from going to new page
    });

    ing.randdy@gmail.com

    ReplyDelete
    Replies
    1. Hi Randdy

      Try changing the single quotes to double quotes around 'fold'

      Delete
  5. This work fine show: function() {$(this).fadeIn(300);}

    ReplyDelete
    Replies
    1. This is a valid workaround, and by manually adding a function with the effect, you have added a lot more flexibility to what can be done on the show event.

      Delete
  6. Thank you very much! It was helpful!

    ReplyDelete