Class attribute on GridView doesn't work after button click

Question

I have a GridView where you can edit the information on the row. So you can click on the row and this pop ups a box where can change something, then click on save. But after I click on the save button and try to click on another row the pop up box doesn't show anymore. I have to completely close out of the form then go back in and click on a row. It works fine if I don't click on the save button. I click on a row, close the pop up box and click on another row. The problem is only after the save button is clicked.

GridView:

<asp:UpdatePanel ID="updOBSAddress" UpdateMode="Conditional" runat="server" >
                               <ContentTemplate>
                                <asp:GridView runat="server" GridLines="None" ID="GVAddresses"  OnRowDataBound="GVAddresses_RowDataBound"  AutoGenerateColumns="false" CssClass="tblStatus" AllowSorting="false" >                    
                                    <Columns>
                                        <asp:TemplateField HeaderText="Code">
                                            <ItemTemplate><%# Eval("AccountCode") %></ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Name">
                                            <ItemTemplate><%# Eval("Name") %></ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnUpdateOBSAddress" />
                    </Triggers>
                </asp:UpdatePanel>

Code Behind:

protected void GVAddresses_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridView gv = sender as GridView;
        DataRowView drv = e.Row.DataItem as DataRowView;
        //e.Row.Cells[0].Attributes.Add("onclick", "event.stopPropagation();");

        if (drv != null)
        {
            e.Row.Attributes.Add("class", "GVAddressesRow");
            e.Row.Attributes.Add("ID", "GVAddressesRow_" + drv["ID"].ToString());
            e.Row.ToolTip = "Click here to Edit Address";
        }
    }
}

Button:

protected void btnUpdateOBSAddress_Click(object sender, EventArgs e)
    {

    }

In the javascript then when the class is clicked it should show the pop up but this doesn't get called anymore after I click the button:

 $(".GVAddressesRow").click(function (e) {  
            ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit");
            EditOBSAddress($(this).attr("ID")); 
        });

What do you do in save button click? – CodingYoshi Sep 01 '17 at 15:59 — CodingYoshi, Sep 01 '17 at 15:59

score 1 · Accepted Answer · answered Sep 01 '17 at 15:54

The problem is the UpdatePanel. It refreshes the GridView using Ajax, and although the user does not see a Postback, the DOM is still changes and the previous bindings made with $(".GVAddressesRow").click are lost. That is why you have to execute it again after a UpdatePanel refresh.

You can use the PageRequestManager for that.

<script type="text/javascript">
    $(document).ready(function () {
        bindPopup();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        bindPopup();
    });

    function bindPopup() {
        $(".GVAddressesRow").click(function (e) {
            ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit");
            EditOBSAddress($(this).attr("ID"));
        });
    }
</script>

CodingYoshi · Answer 2 · 2017-09-01T16:27:05.663

It works the first time because you have added a click handler to all the rows of the gridview like this: $(".GVAddressesRow").click. But when you click the save button new html (rows) are returned from the server. You are not adding a handler to those new rows so they will not work.

To solve the issue you can use jquery on instead of click. Jquery on will work for dynamically created html elements. Please see this answer for more info.

// Bind to all items with class GVAddressesRow inside
// #whatever element, even new ones created later.
$('#whatever').on('click', '.GVAddressesRow', function() {
     /* your code here */
});

Class attribute on GridView doesn't work after button click

2 Answers2

Linked