JQuery диалог в PHP в то время как цикл

Question

JQuery диалог в PHP в то время как цикл

Следующий код прекрасно работает только для кнопки в самой первой строке таблицы. Кнопки других автоматически генерируемых строк не открывают никаких диалогов. Я думаю, проблема в том, что я не назначаю другой id к каждой кнопке. Как я могу это сделать? Я читаю эта страница но ничего не получалось.

<table class="table-hovered">
<tr>
<th class="text-left big">TITOLO</th>
<th class="text-centered" align="center">
<img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
wikipedia
</th>
</tr>
<? while($objResult = mysql_fetch_array($objQuery))
{ ?>
<tr>
<td class="text-left"><?=$objResult["titolo"];?></td>
<td class="text-centered">
<button id="trigger" class="btn">definizione</button>
<div id="dialog" style="display: none;" title="definizione">
<iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
</div>
</td>
<script>
$("#trigger").click(function() {
$("#dialog").dialog("open");
});

$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'definizione',
draggable: true,
width: 500,
height: 400,
resizable: true,
modal: true,
show: 'slide',
hide: 'fade'
});
</script>
</tr>
<?  } ?>
</table>

1

dialog jquery php while-loop

Решение

Другие решения

Теоретически так (добавление <?=$objResult["titolo"];?>к #trigger Идентификаторы в цикле:

<td class="text-left"><?=$objResult["titolo"];?></td>
<td class="text-centered"><button id="trigger<?=$objResult["titolo"];?>" class="btn">definizione</button><div id="dialog" style="display:none;" title="definizione"><iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe></div></td>
<script>
$( "#trigger<?=$objResult["titolo"];?>" ).click(function() {

в чем я не уверен, так это в использовании PHP «$» внутри скрипта jQuery, что может потребовать немного доработки.

0

Вот возможное решение:

$("tr:has(.trigger):has(.dialog)").each(function() {
var row = this
var dialog = $(".dialog", row).dialog({
autoOpen: false,
position: 'center',
title: 'definizione',
draggable: true,
width: 480,
height: 380,
resizable: true,
modal: true,
show: 'slide'
});
$(".trigger", row).click(function() {
dialog.dialog("open");
});

})

0

Источник

Accepted Answer

Проблема в том, что вы создаете несколько элементов с одинаковыми id атрибут, где id должен быть уникальным в пределах одного document, Вместо этого используйте общие классы на #trigger и оттуда найти связанный #dialog быть показано. Попробуй это:

<table class="table-hovered">
<tr>
<th class="text-left big">TITOLO</th>
<th class="text-centered" align="center">
<img src="img/w.png" width="35" height="35" title="wikipedia" align="middle"><br>
wikipedia
</th>
</tr>
<? while($objResult = mysql_fetch_array($objQuery))
{ ?>
<tr>
<td class="text-left"><?=$objResult["titolo"];?></td>
<td class="text-centered">
<button class="btn trigger">definizione</button>
<div class="dialog" style="display: none;" title="definizione">
<iframe frameborder="0" scrolling="yes" width="480" height="380" src="def.php?titolo=<?=$objResult['titolo'];?>"></iframe>
</div>
</td>
</tr>
<?  } ?>
</table>

Затем вы можете назначить один обработчик события .trigger элементы либо в <head> или только перед </body>, как это:

<script type="text/javascript">
$(function() {
$(".trigger").click(function() {
$(this).next('.dialog').dialog("open");
});

$(".dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'definizione',
draggable: true,
width: 500,
height: 400,
resizable: true,
modal: true,
show: 'slide',
hide: 'fade'
});
});
</script>

3