Add row to table with autocomplete jquery

Question

I've been trying to finding an solution now for 1 or 2 days but just can't get it to work..

I have a table with the id="items" and each row has the class "item-row". Im using an autocomplete on the articlename field (Its an invoicing table). This works fine.. Now when i want to add a new row and also trigger the autocomplete for those fields its not working.. the row just wont be added....

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#items');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
    '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addrow").bind('click',function(){
    var $row = $(rowTemp);

    // save reference to inputs within row
    var $itemCode           = $row.find('#articleName');
    var $itemDesc           = $row.find('#articleDescription');
    var $itemPrice          = $row.find('#articlePrice');
    var $itemQty            = $row.find('#articleQty');

    if ( $('#articleName:last').val() !== '' ) {

        // apply autocomplete widget to newly created row
        $row.find('#articleName').autocomplete({
            source: 'getproducts.php',
            minLength: 1,
            select: function(event, ui) {
                $itemCode.val(ui.item.itemCode);
                $itemDesc.val(ui.item.itemDesc);
                $itemPrice.val(ui.item.itemPrice);

                // Give focus to the next input field to recieve input from user
                $itemQty.focus();

                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };
        // Add row after the first row in table
        $('.item-row:last', $itemsTable).after($row);
        $($itemCode).focus();

    } // End if last itemCode input is empty
    return false;
});

The A link has the id="addrow"

BTW if i use the following code it does add a row, but offcourse with no autocomplete:

$("#addrow").bind('click',function(){


$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');



if ($(".delete").length > 0) $(".delete").show();
bind();

});

I hope someone can shine some light or point me in the right direction.. thanks alot.

Answer 1

I actually got it to work with the following code:

$("#addrow").bind('click',function(){

    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');


    $(".item-row:last").find('#articleName').autocomplete({
            source: 'getproducts.php',
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#articleName').val(ui.item.articleName);
                        $itemrow.find('#articleDescription').val(ui.item.articleDescription);
                        $itemrow.find('#articlePrice').val(ui.item.articlePrice);

                        // Give focus to the next input field to recieve input from user
                        //$('#articleQty').focus();
                        $itemrow.find("#articleQty:last").focus();

                return false;
          }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.articleName + " - " + item.articleDescription + "</a>" )
                .appendTo( ul );
        };


if ($(".delete").length > 0) $(".delete").show();
bind();

});

This one did help alot:

var $itemrow = $(this).closest('tr');

Maybe its still not the perfect code but it works for me.

Thanks for the answers ;)

Answer 2

When you're trying to add new rows you will have duplicate ids for elements which is not correct. The autocomplete will be available for the first id. so maybe is better to you to make something like this:

1. You have to modify your html code not to have multiple elements with the same id

2. Try to use .on jquery function for your autocomplete like this

   $('#your-table').on('load','.your-new-row-class',function(){ $(this).autocomplete({ // your autocomplete settings }); });