Я совершенно новичок в веб-разработке, и это мой первый вопрос на сайте.
Я экспериментирую с виджетом автозаполнения jQuery с Joomla (отсюда и вызовы jQuery), и мне удалось заставить его работать через соединение с базой данных для первого ввода строки текста в моей таблице, txtRow1. Этот вход успешно запускает виджет автозаполнения для названий акций.
Когда я использую кнопку добавления строки, автозаполнение больше не работает для следующей строки, txtRow2. Как сделать так, чтобы функция автозаполнения запускалась для всех строк ввода txtRow в таблице?
Я попытался использовать идентификатор «начинается с» с идентификатором, так как все входные данные таблицы будут называться txtRowX, но он все еще работает только для первого, txtRow1.
Как вы, вероятно, можете сказать, весь код взят из веб-уроков и является работой других.
Спасибо за ваше время.
ОБНОВЛЕНИЕ: Благодаря Григсу, который ссылается на другой вопрос, работает следующий код, но я не знаю почему:
jQuery(function(){
jQuery('[id^="txtRow"]').live('keyup.autocomplete', function(){
jQuery(this).autocomplete({
source : "stockdata.php",
minLength: 2
});
});
});
HTML:
<script type="text/javascript">
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);
}
</script>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Stocks</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1" id="txtRow1" size="40" /></td>
<td>
<select name="selRow0">
<option value="value0">text zero</option>
<option value="value1">text one</option>
</select>
</td>
</tr>
</table>
</form>
Файл php:
<?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);
?>