Databases
StackOverflow2013
Postsdbo
POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
    primarykey
    data
    text
    <p>I am completely new to web development and this is my first question on the site. </p> <p>I am experimenting with the jQuery autocomplete widget with Joomla (hence the jQuery calls), and have mangaged to get it working via a database connection for the first text row input in my table, txtRow1. This input successfully fires the autocomplete widget for stock names. </p> <p>When I use the 'add' row button, the autocomplete no longer works for the next row, txtRow2. How can I make the autocomplete function fire for all the txtRow input rows on the table?</p> <p>I tried to use the id 'starts with' expression, as all the table inputs will be called txtRowX, but it still only works for the first one, txtRow1. </p> <p>As you can probably tell, all the code is taken from web tutorials and is the work of others. </p> <p>Thankyou for your time. </p> <p>UPDATE: Thanks to Griegs linking to another question, the following code is working, but I don't know why:</p> <pre><code> jQuery(function(){ jQuery('[id^="txtRow"]').live('keyup.autocomplete', function(){ jQuery(this).autocomplete({ source : "stockdata.php", minLength: 2 }); }); }); </code></pre> <p>The HTML:</p> <pre><code>&lt;script type="text/javascript"&gt; jQuery(function() { jQuery('[id^="txtRow"]').autocomplete({ source: "stockdata.php", minLength: 2 }); }); function addRowToTable() { var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row = tbl.insertRow(lastRow); // left cell var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); // right cell var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow' + iteration; el.id = 'txtRow' + iteration; el.size = 40; el.onkeypress = keyPressTest; cellRight.appendChild(el); // select cell var cellRightSel = row.insertCell(2); var sel = document.createElement('select'); sel.name = 'selRow' + iteration; sel.options[0] = new Option('text zero', 'value0'); sel.options[1] = new Option('text one', 'value1'); cellRightSel.appendChild(sel); } &lt;/script&gt; &lt;form action="tableaddrow_nw.html" method="get"&gt; &lt;p&gt; &lt;input type="button" value="Add" onclick="addRowToTable();" /&gt; &lt;input type="button" value="Remove" onclick="removeRowFromTable();" /&gt; &lt;input type="button" value="Submit" onclick="validateRow(this.form);" /&gt; &lt;input type="checkbox" id="chkValidate" /&gt; Validate Submit &lt;/p&gt; &lt;table border="1" id="tblSample"&gt; &lt;tr&gt; &lt;th colspan="3"&gt;Stocks&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="txtRow1" id="txtRow1" size="40" /&gt;&lt;/td&gt; &lt;td&gt; &lt;select name="selRow0"&gt; &lt;option value="value0"&gt;text zero&lt;/option&gt; &lt;option value="value1"&gt;text one&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p>The php file:</p> <pre><code>&lt;?php $dbhost = 'host'; $dbuser = 'user'; $dbpass = 'pass'; $dbname = 'database'; $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); mysql_select_db($dbname); $return_arr = array(); /* If connection to database, run sql statement. */ if ($conn) { $fetch = mysql_query("SELECT * FROM stocknameticker where stock_name like '%" . mysql_real_escape_string($_GET['term']) . "%'"); /* Retrieve and store in array the results of the query.*/ while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { $row_array['id'] = $row['s_id']; $row_array['value'] = $row['stock_name']; $row_array['abbrev'] = $row['stock_ticker']; array_push($return_arr,$row_array); } } mysql_close($conn); echo json_encode($return_arr); ?&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMGB
    1. USMGB
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
      1. This table or related slice is empty.
      1. VTUpMod
    1. COMatthew, welcome to SO. The way this works is that if an answer given solves the issue you were having you should mark it as the correct answer so that subsequent viewers of this question can see the solution.
      singulars
      1. POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
      1. USgriegs
    2. CODon't forget to review the `delegate` as well, I tend to use it more than `live`. See why here: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
      singulars
      1. POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
      1. USMark Schultheiss
    3. COMark, thankyou for the link. Unfortunately, none of the examples work in my ff browser when I click on them.
      singulars
      1. POjQuery UI autocomplete widget- trying to use it each time I add a row to a table
      1. USMGB
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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