GridView index using asp.net and jQuery

Question

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>

mason · Accepted Answer · 2014-05-19 15:11:32Z

1

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.

answered May 19, 2014 at 15:11

mason

32.8k12 gold badges83 silver badges127 bronze badges

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

Comments

chridam · Accepted Answer · 2014-05-19 15:11:42Z

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
        });

Collectives™ on Stack Overflow

GridView index using asp.net and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related