Невозможно запустить JQuery оповещение при нажатии на кнопку ссылки внутри gridview - PullRequest
Новая
       3

Невозможно запустить JQuery оповещение при нажатии на кнопку ссылки внутри gridview

1 голос
/ 12 марта 2012

Я написал подтверждение, когда пользователь пытался удалить форму записи Gridview следующим образом 

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

Мой GridView выглядит следующим образом 

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

Но я не могу получить требуемое оповещение, может кто-нибудь сказать, где я ошибся

enter image description here

Я использую оповещения с этого сайта

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

добавлены все необходимые сценарии, но проблема все еще та же

Сценарии добавлены

enter image description here

Ответы [ 3 ]

4 голосов
/ 12 марта 2012

Если приведенный выше код - это все, что у вас есть на странице, то вам не хватает ссылки на библиотеку jQuery.

jquery.alert.js - это только плагин для основной библиотеки jQuery, поэтому сначала нужно обратиться к нему, а затем к плагину оповещения. 

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

Также дважды проверьте, какая минимальная версия библиотеки jquery требуется для использования этого плагина.

Редактировать После того, как вы обновили свой код, я вижу, что у вас есть ссылки на JavaScript в неправильном порядке. Пожалуйста, смотрите заказ, который у меня есть выше.

4 голосов
/ 12 марта 2012

Возможно, вы не зарегистрировали JQuery на своей странице.

Посмотрите: http://docs.jquery.com/How_jQuery_Works#jQuery:_The_Basics

, чтобы узнать, как включить JQquery на страницу.

1 голос
/ 12 марта 2012

Я полагаю, вы пытаетесь назначить событие Click всем кнопкам удаления?Но ваш селектор jQuery указывает, что вы ищете один элемент с идентификатором "btnDelete".В любом случае, кнопки GridView будут иметь гораздо более длинный идентификатор, поскольку .NET назначит идентификатор на основе иерархии элементов управления.Это, вероятно, что-то вроде:

GridView1 $ row1 $ btnDelete

GridView1 $ row2 $ btnDelete

и т. Д.

Вы можете просмотреть исходный код страницы, чтобы получитьточные имена, но ваш селектор неверен (даже если вы выбираете только одну кнопку).Добавьте уникальный класс CssClass к вашему btnDelete: 

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

(обратите внимание, что этот класс CssClass не должен существовать в вашем файле .css). Затем измените ваш селектор на: 

$(".promptDelete").click(function () {
    jConfirm('Are you sure you want to delete?', 'Confirmation Dialog', function (r) {
        if (r == true) {
            __doPostBack(id, "");
        }
        else
            return false;
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...