How to submit to the server with JQuery.UI Dialog and ASP.Net?

Question

Hi,

I'm looking for a way to submit information captured in a JQuery Dialog to the server in ASP.Net. I originally thought it would work with a 'hidden' asp button, but the click doesn't seem to be submitting the form. Here's the code I have so far:

<script type="text/javascript">
  jQuery(document).ready(function() {

    var dlg = jQuery("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 150,
            width: 300, 
            modal: true,
            buttons: {
            "Add": function() {
                    var btn = document.getElementById("<%=btnAdd.ClientID %>");
                    if (btn) btn.click();
                    $(this).dialog("close");
                }
            }
        });

        $("#dialog").parent().appendTo("#dialog_target");

  });
</script>

<div id="hidden" style="visibility:hidden" >

    <!-- Hidden button that actually triggers server add -->
<asp:Button ID="btnAdd" 
            runat="server"
            style="display:none"
            OnClick="btnAdd_Click"  />

<!-- Hidden Delete Dialog -->
<div id="dialog" title="New Additional Skill">
        <label>Additional Skill Name:</label>
        <asp:TextBox ID="_txtNewSkillName" runat="server" />
</div>

Any pointers?

Answer 1

Add a form to the dialog then submit the form using JavaScript when you close the dialog or click the button.

Answer 2

I'm not sure, but in FireFox form elements decorated with display:none will not be included in the POST data to the server. So I think your form is submitting, but ASP.NET won't execute your serverside btnAdd_Click function, because it cannot find the button in the POST data.

Try changing display:none to

visibility:hidden;

or

position:absolute;
top:-999px;

Answer 3

Use ClientScript.GetPostBackEventReference rather than setting up a call to btn.click():

buttons: {
    "Add": function() {
        <%= ClientScript.GetPostBackEventReference(
                new PostBackOptions(this.btnAdd))%>;
    }
}

Answer 4

try this:

__doPostBack('btnAdd','OnClick');

This would simulate a button click event and it would postback to the server. In the page load event use this to set the reference:

Page.GetPostBackEventReference(btnAdd)

Hope this helps.

Answer 5

Your hidden button approach is good, but your elements may still not be inside the <form> when you submit though.

To resolve this, just place the dialog inside the <form>, to make sure it submits...otherwise the button that you're clicking isn't in POST set to the server, and the event won't fire.

You would do this by adjusting your .appendTo() call, like this:

$("#dialog").parent().appendTo("form");

Since you're only dealing with 1 <form>, this is all you need :)