CODEWITHSUNDEEP
jqueryasp.netgridview
Developer
Developer

Reputation: 8636

Unable to fire jquery alert when clicking on link button inside gridview

I have written a confirm when user tried to delete a record form Gridview as follows

<head runat="server">
<title></title>
<style type="text/css">
    BODY, HTML
    {
        padding: 0px;
        margin: 0px;
    }
    BODY
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        background: #FFF;
        padding: 15px;
    }

    H1
    {
        font-size: 20px;
        font-weight: normal;
    }

    H2
    {
        font-size: 16px;
        font-weight: normal;
    }

    FIELDSET
    {
        border: solid 1px #CCC;
        -moz-border-radius: 16px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        padding: 1em 2em;
        margin: 1em 0em;
    }

    LEGEND
    {
        color: #666;
        font-size: 16px;
        padding: 0em .5em;
    }

    PRE
    {
        font-family: "Courier New" , monospace;
        font-size: 11px;
        color: #666;
        background: #F8F8F8;
        padding: 1em;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }

    /* Custom dialog styles */
    #popup_container.style_1
    {
        font-family: Georgia, serif;
        color: #A4C6E2;
        background: #005294;
        border-color: #113F66;
    }

    #popup_container.style_1 #popup_title
    {
        color: #FFF;
        font-weight: normal;
        text-align: left;
        background: #76A5CC;
        border: solid 1px #005294;
        padding-left: 1em;
    }

    #popup_container.style_1 #popup_content
    {
        background: none;
    }

    #popup_container.style_1 #popup_message
    {
        padding-left: 0em;
    }

    #popup_container.style_1 INPUT[type='button']
    {
        border: outset 2px #76A5CC;
        color: #A4C6E2;
        background: #3778AE;
    }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
    $(document).ready(function () {
        var id = $("<%# GridView1.ClientID %> tr").find('#btnDelete.ClientID');
        $("#btn").click(function () {
            jConfirm('Are you sure you want to delete?', 'Confirmation Dialog', function (r) {
                if (r == true) {
                    __doPostBack(id, "");
                }
                else
                    return false;
            });
        });
    });
  </script>
  </head>

My GridView is as follows

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
        ForeColor="#333333" OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        OnRowUpdating="GridView1_RowUpdating" OnRowDeleting="GridView1_RowDeleting" Width="574px">
        <RowStyle BackColor="#EFF3FB" />
        <Columns>
            <asp:TemplateField HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="Id" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:Label ID="eid" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="Name" runat="server" Text='<%#Eval("Name") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="ename" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Address">
                <ItemTemplate>
                    <asp:Label ID="Address" runat="server" Text='<%#Eval("Address") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="eprice" runat="server" Text='<%#Eval("Address") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="">
  <ItemTemplate>
                    <asp:LinkButton ID="edit" runat="server" Text="Edit" CommandName="edit"></asp:LinkButton>
                    <input id="btn" type="button" value="Delete" class="submit_12" />
                    <asp:LinkButton ID="btnDelete" runat="server" Visible="false" Text="Delete" CommandName="Delete" />
                </ItemTemplate>                    <EditItemTemplate>
                    <asp:LinkButton ID="update" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
                    <asp:LinkButton ID="cancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
                </EditItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />
    </asp:GridView>

But I am unable to get the required alert can any one tell where I went wrong

enter image description here

I am using alerts from this site

http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

added all required scripts but still same issue

Scripts added

enter image description here

Upvotes: 1

Views: 2870

Answers (3)

mgnoonan
mgnoonan

Reputation: 7200

I assume you are trying to assign the Click event to all the delete buttons? But your jQuery selector indicates you are looking for a single element with the ID "btnDelete". In any case, the GridView buttons will have a much longer ID, as .NET will assign the ID based on the control hierarchy. It's probably something more like:

GridView1$row1$btnDelete

GridView1$row2$btnDelete

etc.

You can view the page source to get the exact names, but your selector is wrong (even if you were only selecting one button). Add a unique CssClass to your btnDelete:

<asp:LinkButton ID="btnDelete" runat="server" Visible="false" Text="Delete" CommandName="Delete" CssClass="promptDelete" />

(Note that this CssClass does not have to exist in your .css file) Then change your selector to:

$(".promptDelete").click(function () {
    jConfirm('Are you sure you want to delete?', 'Confirmation Dialog', function (r) {
        if (r == true) {
            __doPostBack(id, "");
        }
        else
            return false;
    });
});

Upvotes: 1

Tim B James
Tim B James

Reputation: 20364

If the above code is everything you have on the page, then you are missing the reference to the jQuery library.

jquery.alert.js is only a plugin to the main jQuery library, so you need to reference that first, then the alert plugin.

<script src="[path-to-jquery-library]" type="text/javascript"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Also double check what is the required minimum version of the jquery library in order to use this plugin.

Edit After you have updated your code, I can see that you have the javascript references in the wrong order. Please see the order I have above.

Upvotes: 4

Rody
Rody

Reputation: 2655

You probably don't have JQuery registered in your page.

Take a look at: http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

to see how to include JQquery on a page.

Upvotes: 4

Related Questions