CODEWITHSUNDEEP
jqueryjspspring-mvc
java_dude
java_dude

Reputation: 4088

Dynamically fetching matching data for each table row using AJAX

The rows below are generated dynamically

<input id="soid0" name="soid[0].name" type="text" />
<input id="soid1" name="soid[1].name" type="text" />
<input id="soid2" name="soid[2].name" type="text" />

And as I traverse through the text field Ajax query should call the back end and get the matching data if any existed

    $(document).ready(function() {
        $( "#soid0" ).autocomplete({
            source: "/myapp/soid.htm"
        });

    });

The query works but I want it to work for all the dynamically generated rows #soid0,#soid1? In short, I need one query that works for all the text field.

Thanks

Upvotes: 0

Views: 169

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

By Attribute Selector

Use an attribute selector in combination with the ^ starts with selector.

$(document).ready(function() {
    $('input[name^="soid"]' ).autocomplete({
        source: "/myapp/soid.htm"
    });
});

Note that the jquery documentation advises against this selector when classes can be used, stating:

However it will be slower than using a class selector so leverage classes, if you can, to group like elements.

By Class(Preferred Method)

Or apply a class to each input:

HTML

<input id="soid0" class="soid" name="soid[0].name" type="text" />
<input id="soid1" class="soid" name="soid[1].name" type="text" />
<input id="soid2" class="soid" name="soid[2].name" type="text" />

Javascript

$(document).ready(function() {
    $('.soid' ).autocomplete({
        source: "/myapp/soid.htm"
    });
});

By Tag

Or if these are the only inputs on the page, use a tag selector:

$(document).ready(function() {
    $('input' ).autocomplete({
        source: "/myapp/soid.htm"
    });
});

Working Example http://jsfiddle.net/QqeLp/

Upvotes: 2

Related Questions