troubleshooting Question

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

Avatar of ivanhalen
ivanhalenFlag for Italy asked on
JavaScriptjQuery
5 Comments1 Solution3392 ViewsLast Modified:
Hello,
I'm almost new to jQuery... I found some tutorials/posts explaining
1. how to clone a table row (useful for inserting invoice details): http://forum.jquery.com/topic/validate-will-not-submit-to-server
2. how to use the jQuery UI autocomplete with PHP and MySQL (useful for retrieving products from a db table and avoid typing everything): http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/

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 (http://stackoverflow.com/questions/1492198/jquery-auto-complete-for-dynamically-generated-textboxes), 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">
	<thead>
		<tr>
			<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>
	</thead>
	<tbody>
		<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>&nbsp;</td>
			<td><input name="det_price_0" id="det_price_0" type="text" class="required" />€</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<ul>
	<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>
</ul>

The jQuery part

function addrow(destination) {
	rowcount = parseInt(parent_row.attr('id').replace('row_',''))+1;
	clonecopy = destination.clone(true);
	clonecopy.attr("class","iterable");
	// update numerical suffixes
	clonecopy.attr("id","row_"+rowcount);
	clonecopy.find('.sku, .name').val('');
	clonecopy.find("input[name^='det_sku']").attr({
		"name": "det_sku_"+rowcount,
		"id": "det_sku_"+rowcount
	});
	clonecopy.find("input[name^='det_name']").attr({
		"name": "det_name_"+rowcount,
		"id": "det_name_"+rowcount
	});
	clonecopy.find("select[name^='det_quantity']").attr({
		"name": "det_quantity_"+rowcount,
		"id": "det_quantity_"+rowcount
	});
	clonecopy.find("select[name^='det_price']").attr({
		"name": "det_price"+rowcount,
		"id": "det_price"+rowcount
	});
	clonecopy.insertAfter(destination);
	$('#det_arrayitems').val(rowcount);
}

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

$('input.sku').autocomplete({
	source: "../json/products.php",
	minLength: 2,
	select: function(event, ui) {
		$(this).parent().siblings().children('input.name').val(ui.item.name);
	}
})

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

$("#add").live("click", function() {
	parent_row = $('#details tbody>tr:last');
	addrow(parent_row);
	$('input.sku').autocomplete({
		source: "../json/products.php",
		minLength: 2,
		select: function(event, ui) {
			$('input.sku').parent().siblings().children('input.name').val(ui.item.name);
		}
	})
});

Please, can you help me?
Thanks...
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