диалоговое окно jQuery не работает
Диалоговое окно jQuery не работает должным образом для динамических данных из базы данных. Я хочу открыть диалоговое окно для нескольких данных, извлеченных из базы данных. Но проблема в том, что когда я нажимаю любую ссылку, чтобы открыть определенное диалоговое окно для определенного идентификатора записи таблицы базы данных, но он также открывает все диалоговые окна предыдущего идентификатора.
Например, если я нажимаю на диалоговое окно id 2, оно открывает 1 и диалоговые окна одновременно. Я хочу скачать в диалоговом окне тоже.
Код jQuery:
$(document).ready(function() {
$(function() {
$(".dialog").dialog({
autoOpen: false,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 300,
dialogClass: 'main-dialog-class',
modal: true
});
$("a.To").on("click", function() {
$(".dialog").dialog("open");
});
});
Код PHP:
<table>
<?php foreach($tList as $ts) : ?>
<div class="dialog" title="Dialog Form">
<?php
$sql1="select * from table where ID='".$ts["ID"]."'" ;
$result1=mysqli_query($link,$sql1);
while($rows=mysqli_fetch_array($result1)){
echo $rows["t1"];
?>
<a href="Download.php?filename=<?php echo $rows['Path'] ;?>" target="_blank"><?php echo $rows['Name'];?></a><br/>
<?php
}
?>
</div>
<tr>
<td style="display:none">
<?php echo $ts["ID"]; ?>
</td>
<td>
<a href="#" class="To" >
<?php echo $ts["Title"]; ?></a>
</td>
<td>
<?php echo $ts["t1"]; ?>
</td>
<td>
<?php echo $ts["t2"]; ?>
</td>
</tr>
</table>
Решение
Для начала ваш HTML выглядит так, как будто вы вкладываете диалоговое окно в <div> внутри таблицы, но не в ячейке (это должно быть ошибкой в браузере).
Но в вашем javascript вам нужен способ, чтобы конкретно идентифицировать каждое диалоговое окно. Ошибка, о которой вы сообщаете, имеет смысл; выбрав $('.dialog'), вы говорите «выбрать каждый элемент на странице с именем класса« диалог ».
Я думаю, что самый простой способ — это изменить ваш JavaScript на:
$("a.To").on("click", function() {
$(this).find(".dialog").dialog("open");
});
а затем переместите диалоговое окно в ячейку в каждой строке в вашем PHP.
В противном случае вы можете выбрать уникальный идентификатор для каждого диалогового окна и переименовать их в idне class,
РЕДАКТИРОВАТЬ
Да, вы можете добавить уникальный идентификатор в PHP для селекторов, добавить тот же идентификатор в data а затем найдите их с помощью селектора jQuery.
В вашем PHP:
<td>
<a href="#" class="To" data-dialogfinder='<?php echo $ts["ID"]; ?>'>
<?php echo $ts["Title"]; ?>
</a>
</td>
Тогда у вас jQuery:
$("a.To").on("click", function() {
var diabox='#'+$(this).data("dialogfinder");
$(diabox).dialog("open");
});
Другие решения
Я не знаю, полный ли это код, но в том, что вы опубликовали, вы пропустили endforeach; (чтобы закрыть foreach (): открыт в начале).