0
345
ViewsAJAX hover tooltip displays returned data only for first row in table
I am sending data to a PHP page using AJAX, where the data is fetched from MySQL. Hovering over the .payoudata class sends its data-id value to PHP, and gets the result. It is displayed using <div id="PayoutData"> but it's only displaying results related to the first record.
Here is my PHP code for generating the table:
<? 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>
<? } ?>
and here's my jQuery code for fetching and displaying the tooltip:
$('.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);
}
});
});
I am getting first record in this <div id="PayoutData">
When I try to see the second record it's sending data and getting a result but unable to display it, as shown in the screenshots below. What might be a potential way of displaying the returned data?
Screenshot of first record:
Screenshot of second record:
2 answers
Answer question0
You generate a div with same id (PayoutData) for each row as id attribute should be unique. $('#PayoutData').html(paydataresult) will always get first one.
Try this for 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>
<? } ?>
And 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
HTML4 Specification says the ID must be unique.
The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser).
to solve this issue you will need to use classes rather than ids
replace this:
$('#PayoutData').html(paydataresult);
by:
$('.PayoutData', $(this)).html(paydataresult);
and this line:
<div id="PayoutData">
by:
<div class="PayoutData">