How to send to server using jQuery.UI Dialog and ASP.Net?

Question

I am looking for a way to send information received in a jQuery dialog to a server in ASP.Net. Initially, I thought this would work with an asp button's hidden button, but clicking doesn't seem to submit the form. Here is the code that I still have:

<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

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

To fix this, simply place the dialog inside the <form> to make sure it is sent ... otherwise the button you click is not in the POST installed on the server and the event won't fire.

You would do this by setting up your .appendTo() call, for example:

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

Since you only deal with 1 <form> , that’s all you need :)

Answer 2

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

Answer 3

I’m not sure, but in the FireFox form elements decorated with a display: none of them will be included in the POST data on the server. Therefore, I think your form is submitted, but ASP.NET will not execute your serverdbtnAdd_Click function, because it cannot find the button in the POST data.

Try changing the display: none to

 visibility:hidden; 

or

 position:absolute; top:-999px; 

Answer 4

Use ClientScript.GetPostBackEventReference instead of setting up a btn.click() call:

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

Answer 5

try the following:

__ doPostBack ('btnAdd', 'OnClick');

This will simulate a button click event and it will be returned to the server. In the page load event, use this to set the link:

Page.GetPostBackEventReference (btnAdd)

Hope this helps.