Jquery confirmation dialog on asp.net button in repeater

Question

I want to do a jquery confirmation on asp.net button click which is inside repeater but the code below doesnt work.

It doesnt even get in the function Confirmation()

and when the page is loaded confirmDialog div is visible like it's a regular div element not a popup this is no longer issue but rest remains the same

what am I missing?

<asp:Content ID="Content2" ContentPlaceHolderID="AdminHead" runat="server">
   <script lang="javascript" type="text/javascript">
       $(function () {
           $("#confirmDialog").dialog({
               autoOpen: false,
               modal: true,
               buttons: {
                   'Confirm': function () {
                       $(this).dialog('close');
                       return true;
                   },
                   'Cancel': function () {
                       $(this).dialog('close');
                       return false;
                    }
                }
            });
            function Confirmation() { 
            alert("IN");

                $('#confirmDialog')
            .dialog('option', 'onOk', $(this).attr('href'))
            .dialog('open');
            }
        });
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="AdminContentPlaceHolder" runat="server">

<div id="confirmDialog">
    <p>ARE YOU SURE YOU WANT TO CONFIRM THIS ACTION?</p>
</div>
<asp:Repeater ID="Repeater1" runat="server">
   <HeaderTemplate>
        <div class="repeaterItem">
            <table id="AdminTable">
              .
              .
              .
    </HeaderTemplate>
    <ItemTemplate>
              .
              .
              .
              <asp:Button ID="DeleteButton" CssClass="delete" OnClick="ClickDelete" OnClientClick="Confirmation();return false;" runat="server"
                    Text="DELETE" CommandArgument="<%#(Container.DataItem as TagObject).ID %>" ClientIDMode="AutoID" />
            </th>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
              .
              .
              .
        </table></div>
    </FooterTemplate>
</asp:Repeater>
</asp:Content>

-------------------------------------ISSUE-SOLVED------------------------------

My Final Code:

    <asp:Content ID="Content2" ContentPlaceHolderID="AdminHead" runat="server">
   <script lang="javascript" type="text/javascript">
    var deleteButton;
    $(function () {
        $("#confirmDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Confirm': function () {
                    $(this).dialog('close');
                    __doPostBack($(deleteButton).attr('name'), '');
                },
                'Cancel': function () {
                    $(this).dialog('close');
                    callback(false);
                }
            }
        });
    });
    function Confirmation() {
        deleteButton = this;
            $('#confirmDialog').dialog('open');
        }
</script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="AdminContentPlaceHolder" runat="server">

<div id="confirmDialog">
    <p>ARE YOU SURE YOU WANT TO CONFIRM THIS ACTION?</p>
</div>
<asp:Repeater ID="Repeater1" runat="server">
   <HeaderTemplate>
        <div class="repeaterItem">
            <table id="AdminTable">
              .
              .
              .
    </HeaderTemplate>
    <ItemTemplate>
              .
              .
              .
              <asp:Button ID="DeleteButton" CssClass="delete" OnClick="ClickDelete" OnClientClick="Confirmation();" runat="server"
                    Text="DELETE" CommandArgument="<%#(Container.DataItem as TagObject).ID %>" ClientIDMode="AutoID" />
            </th>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
              .
              .
              .
        </table></div>
    </FooterTemplate>
</asp:Repeater>
</asp:Content>

why have you used **return false** `OnClientClick="Confirmation();return false;"` ? — dreamweiver, Apr 17 '13 at 08:14
Well i have been searching the net for 2 days about this and as i find out return false stops asp.net from doing default action but apparently it doesnt work for me i have tried it without it and it didnt work as well. — Kaan Özcan, Apr 17 '13 at 08:22
I guess you were suppose to use it like this `OnClientClick=" return Confirmation();" ` , and in the confirmation function return the true to submit asp page or false to reverse it. — dreamweiver, Apr 17 '13 at 08:25
It still doesnt work and still see the confirmDialog as a regular div at start. Shouldnt it be invisible at start and visible on click? — Kaan Özcan, Apr 17 '13 at 08:40
ok then , hide the div tag initially by setting the CSS as `display:none`.later when the button is clicked change it back. — dreamweiver, Apr 17 '13 at 08:42
solved the div visible at start issue(it turns out i didnt included IU).But the confirmation still not showing up and the serverside click event still firing — Kaan Özcan, Apr 17 '13 at 08:50
:Dialog functionality is part of Jquery UI , have u included that library ? u can check this in firebug,by runnuing in firefox browser — dreamweiver, Apr 17 '13 at 08:58
yes i didnt know that it was part of jquery UI but as i said above i included it and the "Div appearing visible at start like a regular div" issue is solved but the rest remains. after including it i tried both my code and your code both still doesnt work — Kaan Özcan, Apr 17 '13 at 09:04
can u see any error in firebug in firefox or developer tools in chrome ? — dreamweiver, Apr 17 '13 at 09:07
well firebug got frozen on `$('#confirmDialog').dialog('open');` — Kaan Özcan, Apr 17 '13 at 09:32
I guess it was firebugs problem because it works normal now and issue remains(no errors on firebug) — Kaan Özcan, Apr 17 '13 at 09:38
oh, i suppose there is something wrong in the way you have implemented the dialog functionality — dreamweiver, Apr 17 '13 at 09:43

score 1 · Accepted Answer · answered Apr 17 '13 at 09:06

Start by taking the Confirmation function out of the block. Edited to make it actually work:

<script lang="javascript" type="text/javascript">
    $(function () {
        $("#confirmDialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Confirm': function () {
                    $(this).dialog('close');
                    return true;
                },
                'Cancel': function () {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

    });
    function Confirmation() {
        alert("IN");

        $('#confirmDialog').dialog('open');
    }
</script>


<asp:Button ID="DeleteButton" CssClass="delete" OnClick="ClickDelete" OnClientClick="Confirmation();return false;"
    runat="server" Text="DELETE" CommandArgument="asd" ClientIDMode="AutoID" />

Confirmation dialog shows up now but when click confirm asp.net serverside click event doesnt fire. — Kaan Özcan, Apr 17 '13 at 09:19
Maybe you should check this thread: http://stackoverflow.com/questions/6049687/jquery-ui-dialog-box-need-to-return-value-when-user-presses-button-but-not-wor — Yeronimo, Apr 17 '13 at 09:41
thank you i solved the issue with doPostBack. The post you gave link to, gave me the idea. — Kaan Özcan, Apr 17 '13 at 10:38

Jquery confirmation dialog on asp.net button in repeater

1 Answers1