How to click on a button that is dynamically generated using JQuery

Question

I have got a gridview. Each row has a Alternate Names (TextBox) and a hidden button, this button has to get clicked by JQuery on the textbox "onblur" automatically.

 <asp:GridView ID="GridView1" CssClass="GridView1" runat="server" AutoGenerateColumns="False" EnableViewState="True">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing(this)" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="City Name Id">
                <ItemTemplate>
                    <asp:Label ID="NameId" runat="server" Text='<%# Eval("Name_Id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Alternate Names">
                <ItemTemplate>

                    <asp:TextBox runat="server" ClientIDMode="Static" ID="altTxtNames" Style="display: none" onblur="buttonupdate(this)"></asp:TextBox>
                    <asp:Button runat="server" ID="TxtButton" ClientIDMode="Static"  Style="visibility: hidden; display: none" OnClick="TxtButton_Click" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Whenever "onblur" event occurs in the Alternate Names (textbox)

 onblur="buttonupdate(this)"

the following JQuery is executed:

 function buttonupdate(alternateTxtNames) {
            $('#TxtButton').click();
        }

This buttonclick prompts execution of aspx.cs method where the values of edited "Alternate Names" and "City Name Id" from the clicked button grid view row are selected using following code:

 protected void TxtButton_Click(object sender, EventArgs e)
            {
                Button btn = (Button)sender;
                GridViewRow gvr = (GridViewRow)btn.NamingContainer;
                string updatedSNo = (gvr.FindControl("NameId") as Label).Text;
                int SNo = Convert.ToInt32(updatedSNo);
                string updatedText = (gvr.FindControl("altTxtNames") as TextBox).Text;
           }

But everytime the click comes from another row only the first gridview row values are selected which I think is the causality of using ClientIDMode because of which it is not able to distinguish the button click from other rows.

How should I overcome this issue. Can someone kindly guide.

Answer 1

Apart from the logical error of using duplicate id's, if you attach the event handler through jQuery, you would be able to get access to the target of the event. So in that case, rather than onblur="buttonupdate(this) , you could use a jQuery event handler such as this:

Change id to class: (This is necessary to attach the handler to more than one textbox)

<asp:TextBox runat="server" ClientIDMode="Static" class="altTxtNames" Style="display: none" ></asp:TextBox>

New function:

function buttonupdate(row) {
     $(row).find('#TxtButton').click();
}

jQuery event handler:

$("#GridView1 .altTxtNames").on("blur", function(event){
   var clickedRow = $(event.target).closest("tr");
   buttonupdate(clickedRow);
});

The above handler will take the blur event, then look for the closest parent tr, then find the button to click in that row.

I'm not familiar with asp, but the above problem should be solvable through just jQuery.

Answer 2

This is what has worked for me:

Following is the GridView markup:

  <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing(this)" />
        </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Alternate Names">
        <ItemTemplate>
            <asp:Label runat="server" ID="AlternateNames" Text='<%# Eval("alternateNames") %>'></asp:Label>
            <asp:TextBox runat="server" ID="altTxtNames" class="altTxtNameClass" Style="display: none"></asp:TextBox>
            <asp:Button runat="server" ID="TxtButton" Style="visibility: hidden; display: none" OnClick="TxtButton_Click" />
        </ItemTemplate>
    </asp:TemplateField>

This is the Jquery code which changes label to textbox on checkbox click:

function checkboxing(chkbox) {
        var cellz = $(chkbox).parent();
        var lbl = $(cellz).siblings().find('span[id*=AlternateNames]');
        var txtbox = $(cellz).siblings().find('input[id*=altTxtNames]');

        if ($(chkbox).is(':checked')) {
            lbl.hide();
            var str = lbl.text();
            txtbox.val(str);
            txtbox.show();
        }
        else {
            lbl.show();
            txtbox.hide();
        }
    }

This is the code which gets triggered on textbox blur:

$(document).ready(function () {
    $('.altTxtNameClass').on('blur', function (event) {
        var clickedRow = $(event.target).closest('tr');
        buttonupdate(clickedRow);
    });
});

Below is the code that gets called on from above code:

    function buttonupdate(row) {
        $(row).find('input[id*=TxtButton]').click();
    }

Below is the code that gets triggered once Button is clicked

protected void TxtButton_Click(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            GridViewRow gvr = (GridViewRow)btn.NamingContainer;
            string updatedSNo = (gvr.FindControl("NameId") as Label).Text;
            int SNo = Convert.ToInt32(updatedSNo);
            string updatedText = (gvr.FindControl("altTxtNames") as TextBox).Text;
        }

Hope this is of some help to somebody. The syntax of the Jquery on how to implement the idea is provided by Rich so got to thank him for that.