CODEWITHSUNDEEP
javascriptc#jqueryasp.netgridview
Kenni
Kenni

Reputation: 43

GridView index using asp.net and jQuery

I have a GridView with a TextBox with autoComplete in each of the GridViewRow's rows. I have implemented it and it is working, but I can only get it to work with the first row of the GridView. My problem is how to iterate through all the rows of the GridView and implement the autoComplete function. As you can see at the moment I have just set the row index to zero.

Here is the Query:

<script type="text/javascript">
            $(function () {
                $('#<%= (GridViewMealData.Rows[0].FindControl("TextBoxFood")).ClientID %>').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "SearchFoodService.asmx/GetFoodNames",
                        data: "{ 'FoodName': '" + request.term + "' }",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        success: function (result) {
                            response(result.d);
                        },
                        error: function (result) {
                            alert('There is a problem processing your request');
                        }
                    });
                },
                minLength: 0
            });
        });
    </script>

Here is the TextBox control:

<asp:TextBox ID="TextBoxFood" runat="server"></asp:TextBox>

Upvotes: 0

Views: 481

Answers (2)

chridam
chridam

Reputation: 103305

I think the best way to do it to specify a Class for the textbox and handle it based on class and not ID.

TextBox control:

<asp:TextBox id="TextBoxFood" runat="server" CssClass="AutoCompleteField" />

jQuery:

       $('.AutoCompleteField').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "SearchFoodService.asmx/GetFoodNames",
                    data: "{ 'FoodName': '" + request.term + "' }",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        response(result.d);
                    },
                    error: function (result) {
                        alert('There is a problem processing your request');
                    }
                });
            },
            minLength: 0
        });

Upvotes: 1

mason
mason

Reputation: 32693

You don't have to use a client ID to tell it which fields should have autocomplete functionality. Just use a class and class selector.

Change your TextBox definition to this:

<asp:TextBox ID="TextBoxFood" runat="server" CssClass="food-autocomplete"></asp:TextBox>

And change your jQuery selector to this:

$('.food-autocomplete').autocomplete({ //rest of initialization etc

The dot in front of it is used in the jQuery Selector code to tell it to find all elements that have the food-autocomplete class and then it will execute the autocomplete initializer on all the elements.

Upvotes: 1

Related Questions