How do I make an ASP.NET postback-confirmation dialog with jQuery?

Question

i am using the below code to get a Jquery UI popup, but its not returning the value and popup box is closing

I need when i click on button it has to work as confirmation box..!

Code :

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

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

            }
            }
        });

        $(function fn() {
            $('#Button1').click(function (e) {
                return $myDialog.dialog('open');

            });
        });
    });
</script>


<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return fn() onclick="Button1_Click"/>

You have missed a double quote(") for OnClientclick="return fn()" — Karthik Chintala, Feb 18 '13 at 08:43

score 1 · Accepted Answer · answered Feb 18 '13 at 08:48

$(function fn() {

 });

U have a dom ready function inside another one.u need to remove the above block...

 $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

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

            }
            }
        });
            $('<%=Button1.ClientID%>').click(function (e) {
                $myDialog.dialog('open');
                return false;

            });
    });

I hope this is right.

i have removed.. its not woking – Anand Feb 18 '13 at 09:44 — Anand, Feb 18 '13 at 09:44

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

.dialog('open') will always return straight away it will not wait for user action.

You need to change your code to tigger a postback for the Button1 control. Instead of relying on return values.

See here for info on triggering postback ASP.NET postback with JavaScript

Edit

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

__doPostBack("<%=Button1.ClientID %>","");

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

            }
            }
        });

        $(function fn() {
            $('#Button1').click(function (e) {
                return $myDialog.dialog('open');

            });
        });
    });
</script>


<asp:Button ID="Button1" runat="server" UseSubmitBehavior="false" Text="Button" OnClientClick="return fn()" onclick="Button1_Click"/>

edited May 23 '17 at 10:32

Community

1
1

answered Feb 18 '13 at 08:40

Dreamwalker

3,032
4
30
60

I got it what you are saying?Can you please explain me in more clear – Anand Feb 18 '13 at 10:10
Hi, I have updated your code I think that should work. I am not at a pc where I could test that but pretty sure it should work. let me know. – Dreamwalker Feb 18 '13 at 12:29
Hi Zonder.. i am trying the same code in master and child page.. i am getting error object expected $(function fn() { $('#Button1').click(function (e) { return $myDialog.dialog('open'); }); }); the above function is not executing – Anand Feb 19 '13 at 11:41
because your button is running at the server it's name isn't Button1 use <%=Button1.ClientID %> in place to get it's true id – Dreamwalker Feb 19 '13 at 12:08
sorry to come back again here ...i dont have reputation point to chat i have tried the same code by placing in content page and copied the style sheet and script ta to master page.. then agin the same error came ...! i used <%=Button1.ClientID %> only and the button id also Button1 only. – Anand Feb 19 '13 at 13:58
The line __doPostBack("<%=Button1.ClientID %>",""); performs the button postback your code in the code behind should be executing – Dreamwalker Feb 19 '13 at 14:04

score 0 · Answer 3 · answered Feb 18 '13 at 08:40

it's hard to understand the structure of your dom.

but i will give you a working solution

<div id="someDialog">some controls or text or whatever you want to show./div>// add it to your page.

then use Jquery and Jquery UI libraries, put it into head tag

$(function(){
$('#someDialog').dialog({ autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                if(confirm("are you sure you want to close the dialog))
                     $(this).dialog("close");

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

            });


 $('#Button1').click(function (e) {
                $('#someDialog').dialog('open');

            }); // without return statement. 
});

Junaid · Answer 4 · 2013-02-18T10:49:23.420

0

Is the asp.net button rendered with ID 'Button1' in HTML output? If yes, you can try following code (amended your code)

Code :

<style type="text/css" >
        .ui-widget-header, .ui-widget-content
    { color: red !important;}
</style>
<script type="text/javascript">
    $(document).ready(function () {
        var $myDialog = $('<div></div>')
        .html('You are going to Lock the Record.<br/>Click OK to confirm.  Click Cancel to stop this action.')
        .dialog({
            autoOpen: false,
            title: 'Confirm..?',
            buttons: { "OK": function () {
                $(this).dialog("close");

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

            }
            }
        });

         $('#Button1').click(function (e) {
               $myDialog.dialog('open');
               e.preventDefault();      
          });
      });
</script>


<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>

edited Feb 18 '13 at 10:49

answered Feb 18 '13 at 08:41

Junaid

1,708
16
25

even i tried this but same result at the time of load the confirmation is appearing and closing – Anand Feb 18 '13 at 09:45
I have edit the code slightly. `$('#Button1').click` need not to return thing. See this [link](http://jqueryui.com/dialog/#modal-form) for more details. – Junaid Feb 18 '13 at 09:50
Thank you .. i hope its working .. but post back also working the same how to perform the same function at client side not going to server side ? – Anand Feb 18 '13 at 10:02
You can add `e.preventDefault();` inside you `$('#Button1').click` handler after displaying the dialog. I have updated the code, which should prevent a postback – Junaid Feb 18 '13 at 10:49
Yes / No is just closing the dialog.but when i click on Yes on the Jquery UI , the server code have to work ..? – Anand Feb 18 '13 at 11:17

score 0 · Answer 5 · answered Sep 25 '13 at 18:20

0

Add CSS Class delete to control, then apply the jquery confirm dialog:

$('.delete').click(function () {
          return confirm('Are you sure you wish to delete this record?'); 
    });

answered Sep 25 '13 at 18:20

Israel Margulies

8,656
2
30
26

How do I make an ASP.NET postback-confirmation dialog with jQuery?

5 Answers5