How to display Jquery dialogbox on asp:Button click

Question

I am new to JQuery and trying to display a Yes/No confirmation dialog box when the user clicks on an aspx button. When the dialog box gets displayed to the user he can click the Yes or No button and depending upon the user action i want to execute different code present in code behind file i.e. in aspx.cs

I have tried with the following code but not succeded in my objective.

Code present in aspx page:

<link href="jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>

<script>

    jQuery(document).ready(function() {

        jQuery("#myButton").click(showDialog);

        //variable to reference window
        $myWindow = jQuery('#myDiv');

        //instantiate the dialog
        $myWindow.dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
                "Yes": function() {

                },
                "No": function() {
                    $(this).dialog("close");
                }
            }
        });
    }

    );
    //function to show dialog   
    var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show();
        //open the dialog
        $myWindow.dialog("open");
    }

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {
        $myWindow.dialog("close");
    }

</script>

<form id="testconfirmJQ" name="testconfirmJQ" runat="server">
    <fieldset>
    <legend>jQuery UI Modal Submit</legend>
    <p><label for="email">E-mail:</label><br />
    <input id="emailJQ" type="text" name="emailJQ" value="" /></p>
    <p>
        <asp:Button ID="myButton" runat="server" Text="Button" onclick="myButton_Click" />
    </fieldset>
    </form>

    <div id="myDiv" title="Verify Form jQuery UI Style"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p><p id="dialog-email"></p><p>
    If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p></div>
</form>

In code behind the event handler is empty for now. Any suggestions will be appreciated!

What is the problem you are running into? Do you just need help with creating a specific post when the user clicks yes or no? — Quintin Robinson
– Quintin Robinson, Commented Mar 11, 2011 at 16:42

DaveB · Accepted Answer · 2011-03-11 17:20:24Z

0

Since jQuery is client side and you want to execute server side code in your .aspx.cs file, you could try saving a value indicating what the user responded to the prompt and they doing a postback so the server side can execute the appropriate code.

You might look into using the Button.OnClientClick Property which can execute client side code before the postback. Still use the jQuery dialog box.

answered Mar 11, 2011 at 17:20

DaveB

9,5584 gold badges43 silver badges68 bronze badges

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

Comments

Hogan · Accepted Answer · 2011-03-11 16:40:58Z

0

Take out the onclick attribute of asp:button. There should be no need for it -- you are not doing server side actions.

You could also change it to an <input> of type button.

answered Mar 11, 2011 at 16:40

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Collectives™ on Stack Overflow

How to display Jquery dialogbox on asp:Button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related