CODEWITHSUNDEEP
asp.netjqueryjquery-ui
Paul
Paul

Reputation: 41

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

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?

Upvotes: 4

Views: 1997

Answers (5)

Nick Craver
Nick Craver

Reputation: 630409

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

Upvotes: 3

Raja
Raja

Reputation: 3618

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.

Upvotes: 0

Jeff Sternal
Jeff Sternal

Reputation: 48583

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

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

Upvotes: 0

Richard
Richard

Reputation: 1289

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;

Upvotes: 0

matpol
matpol

Reputation: 3074

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

Upvotes: 0

Related Questions