loop - php function()
diálogo jquery en PHP while loop (3)
El problema se debe a que está creando múltiples elementos con el mismo atributo de id , donde el id debe ser único dentro de un único document . En su lugar, use clases comunes en el #trigger y a partir de allí encuentre el #dialog relacionado que se mostrará. Prueba esto:
<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>
A continuación, puede asignar un único controlador de eventos a los elementos .trigger en <head> o justo antes de </body> , así:
<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>
El siguiente código funciona bien solo para el botón en la primera fila de la tabla. Los botones de las otras filas generadas automáticamente no abren ningún diálogo. Supongo que el problema es que no estoy asignando una id diferente a cada botón. ¿Cómo puedo hacer eso? Leí esta página pero nada funcionó.
<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>
En teoría, esto (agregando <?=$objResult["titolo"];?> los #trigger IDs en el ciclo:
<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() {
De lo que no estoy seguro es del uso del PHP "$" dentro del script jQuery, que podría requerir un poco más de ajuste.
Aquí hay una posible solución:
$("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");
});
})