JQuery UI Dialog & Asp (web forms) calling event handler

Question

I have a form with a submit button. On clicking the submit button, i display a jqueryUI dialog with Confirm and Cancel. On clicking Confirm, I want to post back and call the submit button's event handler not the Page_Load event.

I have the following

HTML

<input type="submit" value="Submit" id="submit" runat="server"  onclick="submit" />

JQuery

$("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    $("#ctl01").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

so far, this will call the page_load event because i am 'just' submitting the whole form.

Server side

protected void Page_Load(object sender, EventArgs e)
    {
        if(Page.IsPostBack)
            result.Text += "hey post-back, we did it!";
    }

    protected void submit(object sender, EventArgs e)
    {
        result.Text += "hey, event handler! ";
    }

I'm not seeing a question here? Does it not work? What do you want it to do? — csharpnumpty
– csharpnumpty, Commented Oct 27, 2011 at 8:12
i want it to run the submit(object sender, EventArgs e) event handler, instead of the Page_Load — robasta
– robasta, Commented Oct 27, 2011 at 8:15

Sreekumar P · Accepted Answer · 2011-10-27 09:18:14Z

4

From your post I got that you want to simple go to the server side event while clicking on the button in the Dialog. So I created a Hidden ASP Server Button and triggering it's click from the Confirm button.

Here is the working code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

    <script src="JS/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="JS/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dialog" style="display: none" title="Empty the recycle bin?">
        <p>
            <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            These items will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

    <script>
        jQuery(function() {
            var dlg = jQuery("#dialog").dialog({
                draggable: true,
                resizable: true,
                show: 'Transfer',
                hide: 'Transfer',
                width: 320,
                autoOpen: false,
                minHeight: 10,
                minwidth: 10,
                buttons: {
                    "Confirm": function() {
                        $("#<%=btnNew.ClientID %>").click();
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });
            dlg.parent().appendTo(jQuery("form:first"));
        });

        jQuery(document).ready(function() {
            jQuery("#submit").click(function(e) {
                jQuery('#dialog').dialog('open');
            });

        })

    </script>

    <input type="button" value="Submit" id="submit" />
    <asp:Button runat="server" Style="display: none" ID="btnNew" Text="Submit" OnClick="btnNew_Click" />
    </form>
</body>
</html>

In _Default.asp.cs

public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        protected void btnNew_Click(object sender, EventArgs e)
        {
            result.Text += "hey, event handler! ";
        }


    }

answered Oct 27, 2011 at 9:18

Sreekumar P

6,06812 gold badges62 silver badges84 bronze badges

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

2 Comments

csharpnumpty Over a year ago

Looks like a clumsy implementation IMHO - don't see the need for duplicate hidden buttons. Makes the HTML confusing.

robasta Over a year ago

i added e.preventDefault(); just before calling the hidden button's click. @SpaceBison the first click will be cancelled by jQuery, and instead of posting back, it will display the dialog. On the Confirmation, we simulate the click event so that the postback will run the button's event handler. (if we use $('#form').submit(), the code will only run the Page_load not the button's click event

csharpnumpty · Accepted Answer · 2011-10-27 08:24:12Z

0

I think onclick is a client-side handler

Have you tried OnServerClick, since it's a HTML Button?

http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick%28v=VS.100%29.aspx

answered Oct 27, 2011 at 8:24

csharpnumpty

3,7231 gold badge33 silver badges46 bronze badges

Collectives™ on Stack Overflow

JQuery UI Dialog & Asp (web forms) calling event handler

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related