troubleshooting Question

jQuery UI autocomplete on multiple rows created with .clone() method

Avatar of ivanhalen
ivanhalenFlag for Italy asked on
5 Comments1 Solution3392 ViewsLast Modified:
I'm almost new to jQuery... I found some tutorials/posts explaining
1. how to clone a table row (useful for inserting invoice details):
2. how to use the jQuery UI autocomplete with PHP and MySQL (useful for retrieving products from a db table and avoid typing everything):

Well, 'til now I can clone table rows and I can get autocmplete work on the first row, but problems arise when I add another row and I expect the autocomplete work there, too
I found a thread in StackOverflow (, but had no luck of applying to my case...

And now, the code:

The HTML part

<table border="0" cellspacing="0" cellpadding="4" class="grid" id="details">
			<th scope="col">Codice</th>
			<th scope="col">Nome</th>
			<th scope="col">Quantità</th>
			<th scope="col">Unità di misura</th>
			<th scope="col">Costo U.</th>
			<th scope="col">Totale</th>
		<tr id="row_0" class="iterable">
			<td><input type="text" name="det_sku_0" id="det_sku_0" class="sku required" /></td>
			<td><input type="text" name="det_name_0" id="det_name_0" class="name required" /></td>
			<td><input name="det_quantity_0" id="det_quantity_0" type="text" class="required" /></td>
			<td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
	<li><a href="javascript:void(0);" id="remove" class="icons icon-0">Rimuovi ultima riga</a></li>
	<li><a href="javascript:void(0);" id="add" class="icons icon-new">Aggiungi riga</a></li>
	<li><input type="submit" name="button" id="button" value="Salva tutto" /></li>

The jQuery part

function addrow(destination) {
	rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
	clonecopy = destination.clone(true);
	// update numerical suffixes
	clonecopy.find('.sku, .name').val('');
		"name": "det_sku_"+rowcount,
		"id": "det_sku_"+rowcount
		"name": "det_name_"+rowcount,
		"id": "det_name_"+rowcount
		"name": "det_quantity_"+rowcount,
		"id": "det_quantity_"+rowcount
		"name": "det_price"+rowcount,
		"id": "det_price"+rowcount

$("#add").click(function() {
	parent_row = $('#details tbody>tr:last');

	source: "../json/products.php",
	minLength: 2,
	select: function(event, ui) {

I also tried this (and a couple of other ideas), but no luck

$("#add").live("click", function() {
	parent_row = $('#details tbody>tr:last');
		source: "../json/products.php",
		minLength: 2,
		select: function(event, ui) {

Please, can you help me?
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros