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? — SpaceBison, Oct 27 '11 at 08:12
i want it to run the submit(object sender, EventArgs e) event handler, instead of the Page_Load — robasta, Oct 27 '11 at 08:15

score 4 · Accepted Answer · answered Oct 27 '11 at 09:18

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! ";
        }


    }

Looks like a clumsy implementation IMHO - don't see the need for duplicate hidden buttons. Makes the HTML confusing. — SpaceBison, Oct 27 '11 at 09:58
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 — robasta, Oct 27 '11 at 12:47

score 0 · Answer 2 · answered Oct 27 '11 at 08:24

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 '11 at 08:24

SpaceBison

3,704
1
30
44

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

2 Answers2

Linked