如何使用JQuery在Gridview中获取文本框的ID？

Question

I have searched for a while but i couldn't find an answer to my situation

This is my problem:

I have a Textbox inside a Gridview like this:

        <asp:TemplateField HeaderText="<%$ Resources:DCAAStrategicManagement, obj_lblStandardWeight  %>" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="txtStandardWeight" onkeypress="return onlyNumbers();" Text='<%# Eval("StandardWeight") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

And i need to set a blur event on that TextBox using JQuery .

This is my attempt to achieve that:

 $("input[id*='<%=txtStandardWeight.ClientID %>']").blur(function () {
    Read();
    var currentSum = document.getElementById('<%=hidden.ClientID %>').value;
    var oldLabelData = $('#<%= lblStandardWeightCurrently.ClientID %>').value;
    var newLabelData = oldLabelData + currentSum;
    $('#<%= lblStandardWeightCurrently.ClientID %>').value(newLabelData);
 })

This function should change the lblStandardWeightCurrently Text whenever the blur even occurs. But There is no changes in lblStandardWeightCurrently label..

Read() Function:

function Read() {
    debugger;
    var oDataGrid = document.getElementById("<%= grdPlanObjectivesStandardWeights.ClientID %>");
    var tableRows = oDataGrid.rows;
    var sum = 0;
    for (var i = 1; i < tableRows.length; i++) {
        var col1 = oDataGrid.rows[i].cells[2];
        for (j = 0; j < col1.childNodes.length; j++) {
            if (col1.childNodes[j].type == "text") {
                if (!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "") {
                    sum += parseInt(col1.childNodes[j].value)
                }
            }
        }
    }
    if (!isNaN(sum)) {
        document.getElementById('<%=hidden.ClientID %>').value = sum;
    }
}

I think the problem is here: $("input[id*='<%=txtStandardWeight.ClientID %>']").blur(function () since i can't debug this function . Any help would be appreciated.

Answer 1

Note that your textbox is inside a template. That means that it actually does not exist until grid view is databound, and even what it is, there are many textboxes, one per row, each having a different ID. That means that you cannot simply access it by txtStandardWeight .

However since you are using jQuery anyway, why don't assign some class to the textbox which would allow you to query for it easily?

<asp:TextBox runat="server" ID="txtStandardWeight" CssClass="weightText" ...

$("input.weightText").blur(function () {

One more thing - make sure your javascript is defined in .aspx file, otherwise syntax <%# %> won't work.

Answer 2

$().ready(function () {
            $("#<%= text.ClientID%>").find("tr").each(function () {
                $(this).find("td").each(function () {
                    $(this).find("input[id*=txtStandardWeight]").blur(function () {
                        alert("Hello");
                    });
                });
            });
        });

Let's take an example where gridview has id=text and your textbox has an id=txtStandardWeight then we have to traverse each row and column to get proper result and when you find your textbox then manage the proper functioning according to you.