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



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


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


$("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                "Cancel": function () {

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)
            result.Text += "hey post-back, we did it!";

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





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="">
<head runat="server">
    <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>

    <form id="form1" runat="server">
    <div id="dialog" style="display: none" title="Empty the recycle bin?">
            <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>

        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() {

        jQuery(document).ready(function() {
            jQuery("#submit").click(function(e) {



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

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


Facebook Comments

Website Comments

Post a comment