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

Question

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?

Nick Craver · Accepted Answer · 2010-04-17 15:53:17Z

3

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

answered Apr 17, 2010 at 15:53

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matpol · Accepted Answer · 2010-01-27 16:26:34Z

0

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

answered Jan 27, 2010 at 16:26

matpol

3,0741 gold badge16 silver badges20 bronze badges

Comments

Richard · Accepted Answer · 2010-02-17 19:36:42Z

0

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;

answered Feb 17, 2010 at 19:36

Richard

1,28413 silver badges25 bronze badges

Comments

Jeff Sternal · Accepted Answer · 2010-02-17 20:59:32Z

0

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

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

edited Feb 17, 2010 at 20:59

answered Feb 17, 2010 at 20:04

Jeff Sternal

48.8k9 gold badges97 silver badges121 bronze badges

1 Comment

Jeff Sternal Over a year ago

Whoops - fixed a typo. I copied this straight from my test file and had my Button's variable name instead of yours. D:

Raja · Accepted Answer · 2010-03-11 18:59:19Z

0

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.

answered Mar 11, 2010 at 18:59

Raja

3,6383 gold badges31 silver badges40 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related