Obtain value from Gridview using JS

Question

So I have learned how to pop up an alert by focusing a gridview cell, but I'm not sure how to make it display the value of the cell. Here is my code:

<asp:GridView ID="gridviewSLds" runat="server" CellPadding="0" ForeColor="#333333" GridLines="Both" AutoGenerateColumns="False" OnRowCreated="gridviewSLds_RowCreated">
    <AlternatingRowStyle BackColor="White" />
    <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
    <SortedAscendingCellStyle BackColor="#FDF5AC" />
    <SortedAscendingHeaderStyle BackColor="#4D0000" />
    <SortedDescendingCellStyle BackColor="#FCF6C0" />
    <SortedDescendingHeaderStyle BackColor="#820000" />
    <Columns>
        <asp:TemplateField ItemStyle-BorderWidth="0">
            <ItemTemplate>
                <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Id") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="item" HeaderText="Metric" SortExpression="item" ReadOnly="false" />
        <asp:TemplateField HeaderText="Item">
            <ItemTemplate>
                <asp:TextBox onfocusin="select()" runat="server" Text='<%# Bind("item") %>'
                    ID="txtfocus" class="alertpopup" AutoPostBack="true"></asp:TextBox>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Control Type">
            <ItemTemplate>
                <asp:TextBox onfocusin="select()" runat="server" Text='<%# Bind("itemCtrlType") %>'
                    ID="txtfocus2" class="modalpopup2" AutoPostBack="true"></asp:TextBox>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" />
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

The script is as follows:

$(document).ready(function(){
    $('.alertpopup').focus(function () {
        var itemvalue = $('.alertpopup').val();
        alert(itemvalue);
    });
});

The problem is that this gives me the value of the first cell in the column. Not the one I focused.

winhowes · Accepted Answer · 2016-09-04 23:49:59Z

2

When you do $('.alertpopup').val(); Though $('.alertpopup') selects all of the elements matching your selector, it ends up just using the first one selected. However, the this context of your callback function is set to the HTML element that was focused. So you can do this instead and it will work:

$(document).ready(function(){
    $('.alertpopup').focus(function () {
        var itemvalue = $(this).val(); // By selecting `this` you select the focused element
        alert(itemvalue);
    });
});

answered Sep 4, 2016 at 23:49

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Obtain value from Gridview using JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related