Html control is undefined when accessing it

Question

I have a code that validates a text box inside of a GridView when a button is clicked.

This is a code:

function ValidateEmail(btn_id)
{
    alert(btn_id.id);
    $('#<%=lblTest.ClientID%>').text(btn_id.id);  
    var btnId = btn_id.id;
    alert($(btnId).closest("tr").id);
    return false;  
}

I call this method inside the Grid the following way:

<asp:Button ID="btnEmailUpdate" Text = "Update" CommandName="UpdateEmail" runat="server" onClientClick="return ValidateEmail(this)"/>

Everything looks fine until I'm trying to get the closest tr element:

alert($().closest("tr").id);

My alert box shows "undefined" message.

What am I doing wrong here?

Here is my page.aspx with gridview:

 <%@ Page Language="C#" MasterPageFile="~/Portal.master" AutoEventWireup="true" validateRequest="false" enableEventValidation="false" viewStateEncryptionMode ="Never" CodeFile="ISOSearch.aspx.cs" Inherits="ISOProcessing_ISOSearch" Title="ISO Search" %>  

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,   PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>   


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<script src="../shared/jquery-1.4.2.min.js"   type="text/javascript"></script>

<script type="text/javascript">  


function ValidateEmail(btnObj)
{

    alert(btnObj);
    alert(btnObj.id);
    alert($(btnObj).closest("tr").attr("id"));
    return false;

}      
</script>    


</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentLeft" Runat="Server">
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentMain" Runat="Server">

<asp:UpdatePanel ID="ISOSearchUpdatePanel" runat="server">
<ContentTemplate>
<div id="divIsoSelect" style="width:700px; height:60px; background-color:white">

    <fieldset>
        <legend style="font-size: larger; font-weight: bold">Search ISO by</legend>
 <table>
    <tr>
        <td><asp:DropDownList ID="ddlISOSearch" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlISOSearch_SelectedIndexChanged">
            <asp:ListItem Value="">Select...</asp:ListItem>
            <asp:ListItem Value="ISO Number" >ISO Number</asp:ListItem>
            <asp:ListItem Value="Name">Name</asp:ListItem>
            <asp:ListItem Value="Region" >Region</asp:ListItem>
            <asp:ListItem Value="Division">Division</asp:ListItem>                
       </asp:DropDownList></td>
    <td >&nbsp;</td>
    <td>
        <asp:Panel ID="pnlSearchEntry" runat="server" Visible="false" style="width:500px; border:gainsboro; border-width: thick;">
            <table>
            <tr>
                <td valign="middle" style="width:120px"><asp:Label ID="lblEntry" runat="server" Text=""></asp:Label></td>

                <td valign="top"><asp:TextBox ID="txtSearchValue" runat="server"></asp:TextBox></td>

                <td valign="top">&nbsp;&nbsp;<asp:Button ID="btnFind" runat="server" Text="Select" OnClick="btnFind_Click"/></td>
            </tr>
            </table>
        </asp:Panel>
    </td>
    </tr>
</table>               
</fieldset>
</div>



        <div>    
        <p> 
        <asp:Label ID="lblTest" runat="server" style="position:absolute; left: 221px; top: 100px;"></asp:Label></p>
        <asp:Label ID="lblMsg" runat="server" style="position:absolute; left: 221px; top: 105px;"></asp:Label></p>
        </div>

            <asp:GridView ID="grvIsoSearchResults" runat="server" 
                AutoGenerateColumns="False" PageSize="15"
                AllowPaging = "true" Visible="true"  BorderColor="Red" GridLines="Both"
                OnRowCommand="grvIsoSearchResults_RowCommand"
                DataKeyNames="isonum" 
                OnPageIndexChanging="grvIsoSearchResults_PageIndexChanging"
                style="position:absolute; top: 120px;">
                <PagerSettings FirstPageText="First" LastPageText="Last" NextPageText="Next" PageButtonCount="100" />
                <Columns>
                   <asp:TemplateField HeaderText="ISONUM" SortExpression="isonum">
                        <ItemTemplate>
                            <asp:Label ID="txtgvIsoNum" Text = '<%# Eval("ISONUM")%>' runat="server" Width="70px" style="text-align:center" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="OFFICE NAME" SortExpression="isoofficename">
                        <ItemTemplate>
                            <asp:Label ID="txtgvIsoOfficeName" Text = '<%# Eval("ISOOFFICENAME")%>' runat="server" Width="200px" style="text-align:center" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="REGION" SortExpression="region">
                        <ItemTemplate>
                            <asp:Label ID="txtgvRegion" Text = '<%# Eval("REGION")%>' runat="server" Width="50px" style="text-align:center" />
                        </ItemTemplate>
                    </asp:TemplateField> 
                    <asp:TemplateField HeaderText="DIVISION" SortExpression="client_id">
                        <ItemTemplate>
                            <asp:Label ID="txtgvDivision" Text = '<%# Eval("CLIENT_ID")%>' runat="server" Width="50px" style="text-align:center" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="EMAIL ADDRESS">
                        <ItemTemplate>
                            <asp:TextBox ID="txtgvEmailAddress" Text = '<%# Eval("EMAIL")%>' runat="server" Width="200px" />                                                                  
                            <asp:Button ID="btnEmailUpdate" Text = "Update" runat="server" CommandName="UpdateEmail" onClientClick="return ValidateEmail(this)" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <pagerstyle backcolor="#005482" ForeColor="White" height="30px" verticalalign="Bottom" horizontalalign="Center"/>
            </asp:GridView> 
            <asp:ValidationSummary ID="validationSummary" runat="server"  ShowMessageBox="false" ShowSummary="true"/>

 </ContentTemplate>
 </asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
        Please Wait.....
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>

highwingers · Answer 1 · 2014-03-18T19:16:18.950

1

try:

<table>
    <tr id="stack">
        <td><input type=button value="Go" id="test" /></td>
    </tr>
</table>




$("#test").click(function() {
         alert($(this).attr("id"))
         alert($(this).closest("tr").attr("id"));


})

edited Mar 18 '14 at 19:16

answered Mar 18 '14 at 18:46

highwingers

1,649
4
21
39

I'm passing the button object to my method. I think I do not need to use `this` in your example. I can simply use `btnId`. When I used `$(this)`, I get `undefined` in my alert. When I use `$(btnId)`, I get empty alert box without anything – eugene.it Mar 18 '14 at 19:09
I do not do it that way, because I need to return false/true from that method. And based on that my Command will/will not execute in code behind – eugene.it Mar 18 '14 at 20:01
Does your TD have an id? – A J Mar 19 '14 at 04:53

Unnie · Answer 2 · 2014-03-18T20:49:51.550

0

Firstly in your html code change to : onClientClick=ValidateEmail($(this))

<asp:Button ID="btnEmailUpdate" Text = "Update" CommandName="UpdateEmail" runat="server" onClientClick="return ValidateEmail($(this))"/>

Then Jquery:

 //the parameter will be the button object itself.
        function ValidateEmail(btnObj)
            {

                 alert(btnObj.closest("tr").attr('id'));
//replace the "txtName" with the id of the textbox whose value you need to validate.
    alert(btnObj.closest("tr").find('input[id*="txtName"]').val());

alert(btnObj.prev().val());//will give value of email address textbox "txtgvEmailAddress" return false;
}

Edit: More explanation '.id' property works for javascript objects , in your code btn_id is javascript object for the button(since 'this' is used not $(this)), so btn_id.id will work. But $(btnId).closest("tr") will create jquery object of tr and '.id' property is not available but you need to use .attr('id') instead. Hope this clears it for you..!!

Edit: Added code to get value of textbox of partcular row, code to get email address textbox value

edited Mar 18 '14 at 20:49

answered Mar 18 '14 at 19:32

Unnie

918
8
30

@eugene you don't require the id of the button to get the closest 'tr'.In my answer if you still want to get the id you should use btnObj.attr('id'), since btnObj.id is javascript object property, but in my answer btnObj is jquery object. – Unnie Mar 18 '14 at 20:04
Now I get an empty alert box – eugene.it Mar 18 '14 at 20:12
can you add your html to the question.Please make sure that the closest tr has an id in the html code. – Unnie Mar 18 '14 at 20:14
I think my generated row does not have an id or something. I get an empty alert box – eugene.it Mar 18 '14 at 20:16
Can you tell me why do you want to get the id in that case? Do you know the id of the textbox in that row which you want to validate?It would be helpful if you can add the gridview html into the question – Unnie Mar 18 '14 at 20:18
Gridview is generated on the page, but it does not render any html. I will add my code with gridview top my post. – eugene.it Mar 18 '14 at 20:21
i have added another line of code. That code actually gets the textbox value of any textbox inside that particular row in which the buttton is clicked. You need to replace the "txtName" with the id of the textbox whose value you need to validate. – Unnie Mar 18 '14 at 20:45

A J · Answer 3 · 2014-03-18T20:34:22.977

0

To get the value of any tag use the following

$("selector").attr("property_name")

So to get the following effect

alert($(btnId).closest("tr").id);

Use

alert($(btnId).closest("tr").attr("id"));

Here is the jquery equivalent code for your validate function

$("#btn_id").click(function() {
    //alert(btn_id.id);
    alert($(this).attr("id"))
    var btnId = $(this).attr("id");  
    //alert($(btnId).closest("tr").id);
     alert($(this).closest("tr").attr("id"));
    return false;  
})
//include $('#<%=lblTest.ClientID%>').text(btn_id.id);  accordingly

check this fiddle

edited Mar 18 '14 at 20:34

answered Mar 18 '14 at 20:06

A J

2,112
15
24

give in the html too .. so that i can create a fiddle and show you – A J Mar 18 '14 at 20:22
It works in fiddle. But when come to my site, alert does not show an id for `tr` somehow. Is there anything specific way I should define my grid on a page in order for it to be rendered? – eugene.it Mar 18 '14 at 20:59

score 0 · Answer 4 · edited May 23 '17 at 12:28

0

I solved that issue. Here is a link to posts with the answers:

This is the link to the answer:

How to get value of textbox inside of gridview

My problem was that my GridView was not generation its html, so I was not sure how to traverse DOM to get the value I needed. After finally seeing the DOM, I was able to post my html to this forum and got the correct answer.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 19 '14 at 14:44

eugene.it

417
3
13
32

Html control is undefined when accessing it

4 Answers4