CODEWITHSUNDEEP
javascripthtmljquery-ui
Arif
Arif

Reputation: 1211

Dynamically add rows with jQuery autocomplete

i have a table with single row (textfield) and Add Row button, when user click on Add row, it dynamicaly create another row containing text field. Also i apply autocomplete on that text field.Now that autocomplete function work on first row correctly but when i add new rows it dosn't work. Below is my code plz tell me where i m wrong

Add row function

function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }

            }

        }

jQuery Auto-complete function

$(function() {
        var availableTags = [
            "Apple",
            "Dell",
            "Microsoft",
            "Sony",

        ];
        $( "#product" ).autocomplete({
            source: availableTags
        });
    });

Add row button and table with text field

<input type="image" src="../images/add.png" onClick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
 <TR>
   <TD> <INPUT type="text" name="product" id="product" /> </TD>
 </TR>
</TABLE>

Upvotes: 0

Views: 3291

Answers (1)

Shuo Ran
Shuo Ran

Reputation: 91

Basically, what happened here was that the new element you created dynamically had not been picked up by the jQuery auto-complete function because it is created after you call that function. So what you need to do is calling the jQuery Auto-complete function each time after you add the row(at the end of function addRow()).

Upvotes: 1

Related Questions