foreach内での非同期通信での表示結果に関して
下記のコードのように日報の各項目のあるテーブルを作成しておりまして、
foreachで各auto_id(各日報毎のid)をtableで一覧で表示しております。
そこでjQueryでlikeButtonというクラスをクリックしたらajaxで非同期で
いいねの数が表示されるという実装を行なっています。
jQueryで.load('sales_reportSP.php .like_result');とした時に、
表示される数字がauto_idの1~8の分まですべて表示されてしまいます。
リロードすると元に戻りDBにもちゃんと登録されています。
.load() で auto_id などの情報は渡してないので8つ返ってきていますが渡し方がわからない状態です。
jQuery のコードが動いているのが sales_reportSP.php です。
どなたかご教示いただけますと幸いです。
・バージョン
PHP 7.1.23
mysql 5.6.43
<table>
<tr>
<th>担当</th>
<th>訪問日付<br>顧客名</th>
<th>目的<br>結果</th>
<th>内容</th>
</tr>
<?php if(!empty($salesdata) === true) {
$i = 0;
foreach ($salesdata as $value) { ?>
<tr>
<form action="../history/sales_report_commentSP.php" method="post">
<td><?php echo $value['first_name']; ?></td>
<td>
<?php
$salesDate = explode("-", $value['sales_date']);
echo $salesDate[1] . '/' . $salesDate[2] . '<br><br>'; ?>
<p class="shop_url">
<a href="<?php echo ROOT_PATH; ?>customer/list/customer_dispSP.php?salesClient_id=<?php echo $value['salesClient_id'] ?>" class="shop_url"><?php echo $value['shop_name']; ?></a>
</p>
</td>
<td>
<?php echo $value['progress_purpose_name'] . '<br><span>↓<span><br>' . $value['progress_name']; ?>
</td>
<td>
<p><?php echo $value['sales_history']; ?></p>
<input type="submit" class="comment far" value="">
<input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
<input type="hidden" name="driver_id" value="<?php echo $value['driver_id']; ?>">
<input type="hidden" name="first_name" value="<?php echo $value['first_name']; ?>">
<input type="hidden" name="last_name" value="<?php echo $value['last_name']; ?>">
<input type="hidden" name="sales_date" value="<?php echo $value['sales_date']; ?>">
<input type="hidden" name="shop_name" value="<?php echo $value['shop_name']; ?>">
<input type="hidden" name="progress_purpose_name" value="<?php echo $value['progress_purpose_name']; ?>">
<input type="hidden" name="progress_name" value="<?php echo $value['progress_name']; ?>">
<input type="hidden" name="sales_history" value="<?php echo $value['sales_history']; ?>">
</form>
<!-- いいねアイコン -->
<div class="icon_cow" style="margin:0;">
<input class="likeButton<?php echo $i ?>" type="image" src="<?php echo ROOT_PATH; ?>images/logo.jpg" onclick=""
style="margin:0; width:24px; height:24px; margin:0; margin-left:3px; border:none;">
<input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
<?php foreach($driversId as $id) ?>
<input type="hidden" name="voter_id" value="<?php echo $id; ?>">
<input type="hidden" name="submitter_id" value="<?php echo $value['driver_id']; ?>">
<i class="far fa-thumbs-up"></i>
<?php
try {
$dbh = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME, DB_USER, DB_PASSWORD, $options);
$dbh->query('SET NAMES utf8');
// m_like_masterからauto_idに紐づいたlike_idの数をカウントし取得。 AS counted を引数にしています
$sql = "SELECT COUNT(like_id) AS counted FROM m_like_master
WHERE auto_id= " . $value['auto_id'];
$stmt = $dbh->prepare($sql);
$stmt->execute();
$countResult = $stmt->fetch(PDO::FETCH_ASSOC);
$current_like_count = $countResult['counted'];
$dbh = null;
} catch (PDOException $e) {
exit('顧客データベース接続失敗。'.$e->getMessage());
} ?>
<!-- いいね数の表示 -->
<p class="like_result"><?php echo $current_like_count; ?></p>
<input type="hidden" name="auto_id" value="<?php echo $value['auto_id']; ?>">
<input class="like_num" type="submit">
</div>
</td>
</tr>
<?php $i++; } ?>
</table>
jQueryは同一のhtml内、body一番下に記載しています。
let likeButton = $(".likeButton<?php echo $i; ?>");
likeButton.on('click', function(e){
console.log(e)
let $_parent = $( this ).closest( '.icon_cow' );
$.ajax({
type: 'POST',
url: "sales_report_like_done_ajaxPost.php",
data: {
auto_id : $_parent.find("input[name=auto_id]").val(),
voter_id : $_parent.find("input[name=voter_id]").val(),
submitter_id : $_parent.find("input[name=submitter_id]").val(), }
});
});
likeButton.on('click', function(){
$('.like_result').load('sales_reportSP.php .like_result');
});