0

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

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="&#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');
        });
2
  • フロントエンドの問題に見受けられるのでブラウザに出力されたHTMLもいただけると回答が付きやすいと思います。
    – keitaro_so
    Commented 2019年10月4日 8:35
  • likeButtonに対してclick()イベント発動後は、下記のようになっています。 ``` <p class="like_result"> <p class="like_result"><?php echo $current_like_count; ?></p> <p class="like_result"><?php echo $current_like_count; ?></p></p>class="like_result"><?php echo $current_like_count; ?></p> </p> ```
    – kpg
    Commented 2019年10月4日 8:55

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。