0
347
VistasLa información sobre herramientas de AJAX muestra los datos devueltos solo para la primera fila en la tabla
Estoy enviando datos a una página PHP usando AJAX, donde los datos se obtienen de MySQL. Al pasar el cursor sobre la clase .payoudata , se envía su valor data-id a PHP y se obtiene el resultado. Se muestra usando <div id="PayoutData"> pero solo muestra los resultados relacionados con el primer registro.
Aquí está mi código PHP para generar la tabla:
<? while($srow = $stm->fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td id="tooltip1"> <a href="#" class="payoudata" data-id="<?php echo $srow['application_no']?>"><?php echo $srow['application_no']?> <span><div id="PayoutData"></div></span> </a> </td> </tr> <? } ?>y aquí está mi código jQuery para obtener y mostrar la información sobre herramientas:
$('.payoudata').hover(function(){ var paydata = $(this).attr("data-id"); $.ajax({ type:'post', url:'payout-emp-data.php', data:{paydata : paydata}, success: function(paydataresult){ $('#PayoutData').html(paydataresult); } }); }); Obtengo el primer registro en este <div id="PayoutData">
Cuando trato de ver el segundo registro, está enviando datos y obteniendo un resultado, pero no puedo mostrarlo, como se muestra en las capturas de pantalla a continuación. ¿Cuál podría ser una forma potencial de mostrar los datos devueltos?
Captura de pantalla del primer registro:
Captura de pantalla del segundo registro:
2 Respuestas
Responde la pregunta0
Genera un div con la misma identificación (PayoutData) para cada fila, ya que el atributo de identificación debe ser único. $('#PayoutData').html(paydataresult) siempre obtendrá el primero.
Prueba esto para PHP:
<?php while($srow = $stm->fetch(PDO::FETCH_ASSOC)){ $rowId = $srow['application_no']; ?> <tr> <td id="tooltip1"> <a href="#" class="payoudata" data-id="<?= $rowId ?>"><?= $rowId ?> <span> <div id="PayoutData<?= $rowId ?>"></div> </span> </a> </td> </tr> <? } ?>Y JavaScript:
$('.payoudata').hover(function(){ var paydata = $(this).attr("data-id"); $.ajax({ type:'post', url:'payout-emp-data.php', data:{paydata : paydata}, success: function(paydataresult){ $('#PayoutData' + paydata).html(paydataresult); } }); });0
La especificación HTML4 dice que la ID debe ser única.
El atributo id asigna un identificador único a un elemento (que puede ser verificado por un analizador SGML).
para resolver este problema, deberá usar clases en lugar de identificadores
reemplaza esto:
$('#PayoutData').html(paydataresult);por:
$('.PayoutData', $(this)).html(paydataresult);y esta línea:
<div id="PayoutData">por:
<div class="PayoutData">