Databases
StackOverflow2013
Postsdbo
POjQuery Autocomplete on Dynamically added rows(Using Javascript)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Autocomplete on Dynamically added rows(Using Javascript)
    text
    copied!<p>Below is the code I am using to dynamically create rows in HTML page. </p> <pre><code> 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&lt;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; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i&lt;rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox &amp;&amp; true == chkbox.checked) { if(rowCount &lt;= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </code></pre> <p>Below is the snippet from the HTML document calling the jQuery &amp; addRow &amp; autocomplete functionality,</p> <pre><code>&lt;script type="text/javascript" src="addbox.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt; &lt;script type='text/javascript' src="jquery.autocomplete.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /&gt; &lt;script type="text/javascript"&gt; $().ready(function() { $("#1").autocomplete("autocomplete.php",{ width: 260, matchContains: true, //mustMatch: true, //minChars: 0, //multiple: true, //highlight: false, //multipleSeparator: ",", selectFirst: false }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $().ready(function() { $("#3").autocomplete("autocomplete1.php",{ width: 260, matchContains: true, //mustMatch: true, //minChars: 0, //multiple: true, //highlight: false, //multipleSeparator: ",", selectFirst: false }); }); </code></pre> <p>Here is the function for adding the row button &amp; the table where we're associating the autocomplete with an id,</p> <pre><code>&lt;input type="text" name="sub" size="76" /&gt;&lt;br/&gt;&lt;br/&gt; &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt; &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt; &lt;table border="1" cellpadding="10" id="data"&gt; &lt;tr&gt; </code></pre> <p>Particulars Quantity UOM Unit Price</p> <p>Tax </p> <pre><code>&lt;table id="dataTable"&gt; &lt;TR&gt; &lt;TD &gt;&lt;INPUT type="checkbox" name="chk"/&gt;&lt;/TD&gt; &lt;TD &gt;&lt;INPUT type="text" name="par[]"size="20" id="3" /&gt;&lt;/TD&gt; &lt;TD&gt;&lt;INPUT type="text" name="qua[]" size="5"/&gt;&lt;/TD&gt; &lt;TD&gt;&lt;INPUT type="text" name="uom[]" size="5"/&gt;&lt;/TD&gt; &lt;TD&gt;&lt;INPUT type="text" name="un[]" size="5"/&gt;&lt;/TD&gt; </code></pre> <p>The auto-complete works <em>only</em> for the first input which is displayed by default. It doesn't work at all for additional row(s) which are added using the addrow function. As you can see we've associated id="3" for the input box having name par[]. We believe the problem could be there. Any assistance is much appreciated. Thanks !</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload