Dynamically fetching matching data for each table row using AJAX

Question

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

use $('input[type="text"]')

RafH
– RafH

2013-04-20 21:12:32 +00:00
Commented Apr 20, 2013 at 21:12 — RafH
– RafH, Commented Apr 20, 2013 at 21:12
Will try this one too

java_dude
– java_dude

2013-04-20 21:20:35 +00:00
Commented Apr 20, 2013 at 21:20 — java_dude
– java_dude, Commented Apr 20, 2013 at 21:20

Kevin Bowersox · Accepted Answer · 2013-04-20 21:28:22Z

2

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/

edited Apr 20, 2013 at 21:28

answered Apr 20, 2013 at 21:13

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

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

2 Comments

Kevin Bowersox Over a year ago

@java_dude I had to update the attribute selector, but I would recommend going with the classes. Jquery Documentation agrees.

Kevin Bowersox Over a year ago

@java_dude Excellent, that is the best approach!

Collectives™ on Stack Overflow

Dynamically fetching matching data for each table row using AJAX

1 Answer 1

By Attribute Selector

By Class(Preferred Method)

By Tag

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

By Attribute Selector

By Class(Preferred Method)

By Tag

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related