CODEWITHSUNDEEP
jqueryasp.net
Matt
Matt

Reputation: 5680

Getting Columns Checked in GridView with jQuery

I have a GridView and am needing to grab column 1 and 2 (the text therein) and put that text elsewhere in the page, another textbox.

Here is what I have thus far:

 var checked = $('input:checkbox').click(function(e) {
            //place airport in textbox, txtAirport
            var loc = $("tr:has(:checkbox:checked) td:nth-child(1)");
            var ac = $("tr:has(:checkbox:checked) td:nth-child(2)");

            // txtAirport.Text = loc + ac;
            $("#<%= txtAirport.ClientID%>").val(loc + ac);
        });

the problem is I am getting {Object object} {Object object} in my textbox where I'm expecting to get a city, st and an airport. How do I clarify my "loc" and "ac" variables to give me what I need? I've tried .text and .val() to no avail.

Here is the HTML (ASP.NET Gridview):

 <asp:DataGrid ID="dgSearch" runat="server" AllowPaging="False" AllowSorting="False"
                            CellPadding="3" CellSpacing="2" ShowFooter="False" GridLines="None" AutoGenerateColumns="false">
                            <AlternatingItemStyle Wrap="False" CssClass="HeaderRowAlternate"></AlternatingItemStyle>
                            <ItemStyle Wrap="False"></ItemStyle>
                            <HeaderStyle Font-Bold="True" Wrap="False" CssClass="HeaderRowStyle"></HeaderStyle>
                            <Columns>
                                <asp:TemplateColumn HeaderText="Select">
                                    <HeaderStyle CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkLookup" runat="server" CssClass="checkbox"></asp:CheckBox>
                                    </ItemTemplate>
                                </asp:TemplateColumn>
                                <asp:BoundColumn Visible="False" DataField="AirportID"></asp:BoundColumn>
                                <asp:BoundColumn Visible="False" DataField="City"></asp:BoundColumn>
                                <asp:BoundColumn DataField="Loc" HeaderText="Location">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="AirportCode" HeaderText="Airport Code">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="AirportName" HeaderText="Airport Name">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                                <asp:BoundColumn DataField="MilesFromSource" HeaderText="Distance">
                                    <HeaderStyle Wrap="False" CssClass="HEADERSTYLE"></HeaderStyle>
                                    <ItemStyle Wrap="False"></ItemStyle>
                                </asp:BoundColumn>
                            </Columns>
                        </asp:DataGrid>

Upvotes: 0

Views: 1111

Answers (2)

Kevin
Kevin

Reputation: 1992

jQuery selectors return wrapped sets containing the selected DOM elements, so you'll need to use .text() or .html()

EDIT: OK, I've replicated your code, what you need is

$("tr:has(:checkbox:checked) td:nth-child(2)");
$("tr:has(:checkbox:checked) td:nth-child(3)");

And then to do 

$("#<%= txtAirport.ClientID%>").val(loc[0].innerHTML + ac[0].innerHTML);

This will give you the text in the first and second columns (after the checkbox) of the first row (loc[1] and ac[1] for second rows etc.). The issue you had was td:nth-child(0) was returning the DOM object of the checkbox's <td> element

To loop through checked checkboxes only:

for (var i = 0; i < loc.length; i++) {
    alert(loc[i].innerHTML + " " + ac[i].innerHTML);
}

You don't need to check the checkbox is checked since the jQuery selector already does that for you

Upvotes: 1

IvanH
IvanH

Reputation: 5159

jQuery returns an array or matched objects so you need to use loc[0].innerHTML or loc.html() or loc.text() instead of loc (or ac respectively).

   var checked = $('input:checkbox').click(function(e) {
        //place airport in textbox, txtAirport
        var loc = $("tr:has(:checkbox:checked) td:nth-child(2)");
        var ac = $("tr:has(:checkbox:checked) td:nth-child(3)");

        // txtAirport.Text = loc + ac;
        $("#<%= txtAirport.ClientID%>").val(loc.html() + ac.html());
    });

It is probably necessary to change numbers of cells too (1,2 -> 2,3) see http://jsfiddle.net/vXtKq/ It can be that you selector is not specific enough but if you post result of upper code or rendered HTML (from page source in your browser) the finding of solution is easier.

Upvotes: 1

Related Questions