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
– dreamweiver, Commented Apr 17, 2013 at 8: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
– Kaan Özcan, Commented Apr 17, 2013 at 8: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
– dreamweiver, Commented Apr 17, 2013 at 8: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
– Kaan Özcan, Commented Apr 17, 2013 at 8: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
– dreamweiver, Commented Apr 17, 2013 at 8:42

Yeronimo · Accepted Answer · 2013-04-17 09:06:17Z

1

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" />

answered Apr 17, 2013 at 9:06

Yeronimo

1,75915 silver badges29 bronze badges

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

3 Comments

Kaan Özcan Over a year ago

Confirmation dialog shows up now but when click confirm asp.net serverside click event doesnt fire.

Yeronimo Over a year ago

Maybe you should check this thread: stackoverflow.com/questions/6049687/…

Kaan Özcan Over a year ago

thank you i solved the issue with doPostBack. The post you gave link to, gave me the idea.

Collectives™ on Stack Overflow

Jquery confirmation dialog on asp.net button in repeater

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related