locked
GridView Row Delete Using Ajax RRS feed

  • Question

  • User491718545 posted

    Hi,

    M going delete Row using Ajax using Script Manger

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:GridView ID="GridView1" runat="server" CssClass="table table-hover" AllowPaging = "true" GridLines="None" AutoGenerateColumns="False" OnPageIndexChanging="GridView1_PageIndexChanging">
    <Columns>

    <asp:TemplateField HeaderText="Product Name">
    <ItemTemplate>
    <asp:Label ID="lbPassport" runat="server" Text='<%# Bind("Title") %>'></asp:Label>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Bar Code">
    <ItemTemplate>
    <asp:Label ID="lb_StartDate" runat="server" Text='<%# Bind("Barcode") %>'></asp:Label>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Description">
    <ItemTemplate>
    <asp:Label ID="lb_StartDate" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>
    <ItemTemplate>

    <asp:TemplateField HeaderText="Status">

    <a href="ProductMaster.aspx?Value=<%# Eval("id") %>" class="popup1">Edit </a>&nbsp;
    <a href="#" id='<%# Eval("id") %>' onclick='DeleteProduct(this.id)' class="popup">Delete </a>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Center" Width="30px" />
    </asp:TemplateField>

    </Columns>
    </asp:GridView>
    </div>
    </ContentTemplate>
    </asp:UpdatePanel>

    when i delete row working fine,when i click page index go to Nextpage doesn ot work,ajax should not called

    $('.popup').click(function () {

    var source = this;
    $.ajax({
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: 'ProductMasterView.aspx/Product_Delete',
    data: JSON.stringify({ id: this.id }),
    }).
    fail(function (s) {
    alert(s);
    })
    .done(function () {
    var par = $(source).parents('tr');
    par.remove();
    });
    });

    Row delete first page working fine.after delete one record go to next page delete record doesnot work..ajax shouldnt call??

    Thanks

    Friday, January 3, 2014 2:07 AM

Answers

  • User-1408041064 posted

    So it work great until a first partial postback occurred.  After that, the UpdatePanel’s new element would no longer have event bidning wired which are done using jQuery object when document first time loaded.

    It's look like event binding like below
     $('.popup').click(function () ...
    is lost after first Ajax call (partial postback).

    Use pageLoad() to wired up event even after each Ajax call. Refer http://encosia.com/document-ready-and-pageload-are-not-the-same/ for more detail.

    Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 3, 2014 5:53 AM

All replies