[jQuery] Noob
[jQuery] Noob
Hello,
I have a table that has some form inputs in a single row. One of the
text inputs is an autocomplete that gets its data from a PHP variable.
I have all that working.
I have a button that clones this row and all its inputs incrementing
the IDs and then appending it to the table. That works fine.
The problem I am having is that I dont know how to attach the
autocomplete to the input in the new row.
I have pasted my code below. If you read it you can probably tell that
I ran into the same issue with the delete row button, but I got around
by using straight Javascript. But if I can solve how to attach to a
new element I can fix both problems.
Thanks in advance.
Steve
$(document).ready(function()
{
$('#add_recipe_row').click(function()
{
add_row('recipe_list', 'row_');
});
$('#add_ingredient_row').click(function()
{
add_row('ingredient_list', 'row_');
}
);
}); // ends document.ready
function add_row(tableID, rowIDprefix)
{
// Clone the last row of the table.
var clonedRow = $('#'+ tableID + ' tr:last').clone();
// Generate an incremented index for the new row. -1 because there is
a table header row
var newIndex = (document.getElementById(tableID).rows.length -1);
// Set the ID of the row with the new index
clonedRow[0].id = rowIDprefix + newIndex;
//console.log('ingredient_' + newIndex);
// Loop through all of the inputs and select in the cloned row
// Find the name and ID of the input/select element and find the
number in it abd replace it with the
// new index.
$.each($('input, select', clonedRow), function(i, val)
{
//console.log(val);
//console.log('Index -1: ' + (newIndex -1) + '. Index: ' +
newIndex);
val.name = val.name.replace((newIndex - 1), newIndex);
val.id = val.id.replace((newIndex - 1), newIndex);
val.value = '';
});
//alert($('td.delete_col', clonedRow).parent().get(0).id);
$('td.delete_col', clonedRow).html('<span onclick="delete_row(\'' +
rowIDprefix + newIndex + '\');">delete</span>');
// put the row into the table
$('#' + tableID).append(clonedRow);
}
function delete_row(rowID)
{
//alert(obj.parent().parent().get(0).id);
//var rowID = obj.parent().parent().get(0).id;
if(rowID == 'row_0')
{
alert('You cannot delete this row');
}
else
{
$("#"+rowID).remove();
}
}