У меня есть автоматически обновляющаяся таблица (работает), которую вытаскивает из MySQL, чтобы обновлять информацию за последние 10 секунд. Эта таблица находится в включенном php файле, поэтому я могу использовать.load(), чтобы вызвать его для обновления.
Используя помощь, которую я нашел в Интернете, я смог успешно создать сценарий jquery, который выделяет и выбирает строку, на которую вы нажимаете. Он работал, когда таблица была статичной, но уже не сейчас, когда она динамична (автоматически обновляется).
Зная очень мало о JQuery, как я могу сохранить значение строки, на которую была нажата кнопка AKA, она держится на этом номере, поэтому, когда пользователь нажимает "Подтвердить выбор", этот номер передается через форму для отправки.
Например; При просмотре списка я вижу два варианта: "0008" и "0009". Я нажимаю "0008", таблица обновляется, а 0008 может или не может оставаться в списке. Однако, когда я нажал на него, он сохранил "0008", поэтому, когда я нажимаю "Подтвердить выбор", передается значение "0008".
На данный момент предупреждение просто появляется и говорит: "undefined". (Возможно, я должен добавить, я также попробовал.text() вместо.html())
<script src="java/jquery.js"></script>
<script>
function refreshInfoBox() {
$('#infobox').load('refreshtable.php');
setTimeout(refreshInfoBox, 10000);
}
setTimeout(refreshInfoBox, 10000);
$(document).ready(function() {
refreshInfoBox();
$("#tableinfo tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:first').html();
});
$('.select').on('click', function(e){
alert($("#tableinfo tr.selected td:first").html());
});
});
</script>
<div id="fixed">
<?php
include("topmenu.php");
?>
<div id="backpanel">
<div id="infobox">
<?php
include("refreshtable.php");
?>
</div>
<input type="button" name="OK" class="select" value="Confirm Selection"/>
</div>
</div>
refreshtable.php
<table id ="tableinfo">
<tr><th width="12%">ID#</th>
<th width="8%">HEADER2</th>
<th width="40%">HEADER3</th>
<th width="40%">HEADER4</th>
</tr>
$query= $db->prepare("SELECT * FROM dbtable ORDER BY dbtime");
$query->execute();
$count = $query->rowCount();
if($count > 0)
{
while($info = $query->fetch())
{
?>
<tr>
<td><?php echo $info['id']; ?></td>
<td><?php echo $info['field2']; ?></td>
<td><?php echo $info['field3']; ?></td>
<td><?php echo $info['field4']; ?></td>
</tr>
<?
}
}?></table>
Ваш jQuery здесь $("#tableinfo tr").click(function(){
связывается с элементом DOM на вашей странице. Не какой-либо элемент DOM с этим идентификатором, а явный экземпляр этого элемента, тот, который существует в то время.
Когда выполняется сценарий обновления, таблица заменяется новой таблицей. Он может иметь тот же идентификатор, что и старая таблица, но это не та таблица, на которую была связана ваша функция, чтобы ваша функция не могла ссылаться на нее.
Вы можете каждый раз переустанавливать функцию в новую таблицу, но лучший способ сделать это - только получить данные, которые вам действительно нужны.
Вместо перезагрузки всей таблицы вы можете опросить сервер на наличие обновлений, вернуть их как минимальные JSON и вставить их в новые строки в таблицу, используя функцию успеха вашего вызова ajax. Было бы меньше затрат на данные, и это было бы лучше для пользователей.
Учитывая, что вы очень мало знаете о jQuery, который пока не имеет особого смысла. Посмотрите на функцию append как отправную точку.