質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

ajaxでショッピングカート内のデータを動的に表示させるには?

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 479

neginattofan

score 60

練習用にECサイトを作っています。
ショッピングカートページの合計金額、合計個数をカートに入れた商品をセレクトボックスで個数を変更するようにしています。
変更すると、jQueryでイベントが発生して、商品IDと変更後の個数をajaxで送り、送り先でカート内のデータを更新しています。

コードで流れを説明すると、

             <select name="product-num" data-productid="<?php echo $val['id']; ?>">
                <?php for($i = 0; $i < 3num"0; $i++) : ?>
                  <option value="<?php echo $i?>" <?php if ($i == $num)  echo "selected"; ?> ><?php echo $i?></option>
                <?php endfor ; ?>
              </select>


上のような感じのセレクトボックスです。

これを変更すると、以下のコードでajaxNumにデータを送ります。

  var $select = $('.js-select-num');
  var selectProductId = $select.data('productid');
  $select.on('change', function() {
    var value = $select.val();
     $(this).children('option').removeAttr('selected');
    $.ajax({
      type: "POST",
      url: "ajaxNum.php",
      data: {
        productId : selectProductId,
        number : value,
      },
    }).done(function( data ) {
      console.log('Ajax success');

    }).fail(function ( msg ) {
      console.log('Ajax failure');
    });

    });

送り先のajaxNum.phpで合計金額、合計個数を格納している$_SESSION['cart_total]を更新しています。

$p_id = $_POST['productId'];
$number = $_POST['number'];
$productInfo = getProductDetail($p_id);

foreach($_SESSION['cart_each'] as $key => &$val) {
  // 変更した商品の個数とその合計金額を更新
  if ($val['id'] == $p_id) {
      $val['number'] = $number;
      $val['price'] = $number * $productInfo['price'];
    }
  }
  unset($val);
  $_SESSION['cart_total']['num'] = 0;
  $_SESSION['cart_total']['price'] = 0;
  foreach($_SESSION['cart_each'] as $key => $val) {
    // カート内の合計個数と合計金額を更新
    $_SESSION['cart_total']['num'] += $val['number'];
    $_SESSION['cart_total']['price'] += $val['price'];

  }

問題は、データが更新されただけで画面のhtmlが動的に更新されていないのですが、どうすればいいのでしょうか?
データを更新した後にリロードすると、更新後のデータが表示されるので、更新はエラーなくできているのですが。。

不備があればご指摘お願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

画面の話であれば勝手に描画され直したりはしませんので、API側から然るべき情報を返し、返り値(doneに入ってくる)をJavaScriptで然るべきところに設定するように書いてください。

API側の「出力」の処理はすべてそのまま返ってきます。
※dataTypeによって返り値の形式も変わります

ただ、現状の仕組みだとせっかくfailにエラーが返ってきてもどこにも出力してないので、そのままでconsole.logに突っ込むくらいはしておくと良いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/06 15:50

    ありがとうございます。おかげで方向性が見えました。適切な質問をするよう心がけます。

    キャンセル

  • 2020/02/06 15:51

    それはよかったです。
    ところで質問の不備について指摘してましたっけ?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る