foreach内での非同期通信での表示結果に関して

Question

下記のコードのように日報の各項目のあるテーブルを作成しておりまして、

foreachで各auto_id(各日報毎のid)をtableで一覧で表示しております。

そこでjQueryでlikeButtonというクラスをクリックしたらajaxで非同期で

いいねの数が表示されるという実装を行なっています。

ここまでたくさん質問させて頂きなんとかあと一歩のところまで来ているのですが、

jQueryで.load('sales_reportSP.php .like_result');とした時に、

表示される数字がauto_idの1~8の分まですべて表示されてしまいます。
リロードすると元に戻りDBにもちゃんと登録されています。

sqlのCOUNTで表示させている部分がおかしいのかと思っているのですがわかりません。

どなたかご教示いただけますと幸いです。

<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="&#xf086;">
            <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');
		});

補足情報（FW/ツールのバージョンなど）

・バージョン
PHP 7.1.23
mysql 5.6.43

Comments

[m.ts10806]

>('sales_reportSP.php .like_result');

そもそもこの書き方はどこの何を参考にしたのでしょうか？引数ひとつしか渡していませんが

[t_obara]

処理される順番が把握できていませんが、期待通りの順番で処理されていることを確認されていますか？

[kpg]

m.ts10806様
こちらのサイトを参考にしました。
https://www.sejuku.net/blog/42555
<body>
<div></div>
<script>
$('div').load('other.html .list:first');
</script>
</body>
上記の表記がありましたので参考にしました。

t_obara様
処理の順番は期待通りされていると思います。
DBにデータが入力されていて、非同期で表示はされています。

[m.ts10806]

侍エンジニアブログは誤記も多く過去に大問題があったのでなるべく避けたほうが良いです。無駄にSEOに強いので上位に上がってきているだけで記事の質は決して良いとは言えませんが(私は回答では使ってません)
なるべく公式か、マニュアルの日本語訳サイトを確認しましょう。
https://api.jquery.com/load/
http://js.studio-kingdom.com/jquery/ajax/load
http://www.jquerystudy.info/reference/ajax/load.html

[kpg]

m.ts10806様
そうなんですね。知らなかったです。ありがとうございます。
参考にさせて頂きます。

[x_x]

sales_reportSP.php に GETリクエストを投げると .like_result が一つだけ返ってくるのでしょうか？

[kpg]

x_x様
.like_resultがauto_id分(8つ)返って来てしまいます。

[x_x]

そもそもどうしたいのでしょう？
.load() では auto_id などの情報は渡してないので8つ返ってきているということですか？
jQuery のコードが動いているのが sales_reportSP.php 自身だったりします？

[kpg]

x_x様
その通りです。
.load() で auto_id などの情報は渡してないので8つ返ってきていますが私方がわからない状態です。
jQuery のコードが動いているのが sales_reportSP.php です。

[annderber]

$('.like_result').load('sales_reportSP.php?auto_id=1 .like_result');
のようにクエリストリングで渡せばいいのではないでしょうか。

後ajax処理では何の処理をしているのでしょうか。
ajax処理とload処理は別々の処理？

Answer 1

とりあえず

likeButton.on('click', function(e){
  let $_parent = $( this ).closest( '.icon_cow' );
  var 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(),                }
  };
  $.ajax({
  type: 'POST',
  url: "sales_report_like_done_ajaxPost.php",
  data: data,
  });
console.log(data);
});

的な処理でdataを検証してみるとか
ただなぜ「likeButton.on('click'」が2箇所にわけて設定しているかわからないし
ajaxで投げるのとと別にloadしてるのかもわからないですね

Comments

[kpg]

yambejp様
ご指摘いただいた内容でconsole.logをしたら、
sales_reportSP.php:666 Uncaught ReferenceError: data is not defined
at HTMLInputElement.<anonymous> (sales_reportSP.php:666)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.y.handle (jquery.min.js:2)
と、表示されました。
「likeButton.on('click'」件はlikeButtonがclickされたら非同期でDBに値が入り、表示されるとイメージしております。

[yambejp]

同じスコープ内で宣言したdata変数が参照できないのは何か
根本的な勘違いをしているかtypoだと思います