1

私のサイトでは、「カートに追加」ボタンを使用してショッピング商品をロードしています。jqueryajax呼び出しを使用して動的にボタンを押します。ショッピングカート自体には、jcart、jqueryプラグインを使用します。

次にカートにアイテムを追加すると、jcartはajaxとPOSTを使用してphpファイルを呼び出します。すべて正常に動作し、商品はカートに正しく追加されますが、カートに商品を追加するたびにページが再読み込みされます。ajax呼び出しを使用して製品をロードしない場合（たとえば、ページに直接ロードする場合）、すべてが正常に機能するため、どこかで競合が発生している必要があります。手がかりはありますか？

これは私の製品です-関数とhtmlです。

...
<script>
      function loadProducts(str) {
             $.ajax({
                   type: 'GET',
                   async: true,
                   url: 'ajax/load.php',
                   data: {'max-id' : str},
                   cache: false,
                   success: function(response) {
                        $('#products').html(response).fadeIn('slow');
                   },
                 });
        }
</script>

<script>
     $(document).ready(function() {
        var n = '';
       loadProducts(n);
     });
</script>

<script src="jcart/js/jcart.js"></script>

</body>
</html>

jcart-Pluginとそのajax-callは、次の場所にあります： http ://conceptlogic.com/jcart/standalone-demo/jcart/js/jcart.js

これがjcart.jsの関数です。

            $.ajaxSetup({
            type: 'POST',
            url: path + '/relay.php',
            cache: false,
            success: function(response) {
                // Refresh the cart display after a successful Ajax request
                container.html(response);
                $('#jcart-buttons').remove();
            },
            error: function(x, e) {
                ...
            }
        });

..。

    function add(form) {
        // Input values for use in Ajax post
        var itemQty = form.find('[name=' + config.item.qty + ']'),
            itemAdd = form.find('[name=' + config.item.add + ']');

        // Add the item and refresh cart display
        $.ajax({
            data: form.serialize() + '&' + config.item.add + '=' + itemAdd.val(),
            success: function(response) {

                // Momentarily display tooltip over the add-to-cart button
                if (itemQty.val() > 0 && tip.css('display') === 'none') {
                    tip.fadeIn('100').delay('400').fadeOut('100');
                }

                container.html(response);
                $('#jcart-buttons').remove();
            }
        });
    }

..。

    // Add an item to the cart
            // is called from the submit-buttons within each product picture
    $('.jcart').submit(function(e) {
        add($(this));
        e.preventDefault();
    });

「loadProducts（）」関数は、これを各アイテムの#productsコンテナに入れます。

<form method="post" action="" class="jcart">
    <fieldset>
        <input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
        <input type="hidden" name="my-item-id" value="SDK12345" />
        <input type="hidden" name="my-item-name" value="Product Name" />
        <input type="hidden" name="my-item-price" value="1.00" />
        <input type="hidden" name="my-item-qty" value="1" />
        <ul>
            <li><img src="product-image.jpg"/></li>
            <li>1.00 Dollar</li>
            </ul>
        <input type="submit" name="my-add-button" value="Add to cart" class="button" />
    </fieldset>
</form>
4

2 に答える 2

1

カートに追加ボタンのバインドされたクリックアクションでloadProducts（）関数を呼び出していると思います。デフォルトのクリック動作で要素を使用している場合。'returnfalse;'でそれを防ぎたいかもしれません。バインドされたクリック関数の最後の行。

このような：

$('a.addtocart').bind('click', function(){
  //logic here (ajax)
  return false;
});

成功関数の後に、IEで乱雑になる可能性のあるコンマもあります。

success: function(response) {
  $('#products').html(response).fadeIn('slow');
},

カンマを削除します

私はあなたのajax呼び出しにエラーがあると思います、それを解決してみてください...私はあなたのバスケットに製品を追加するあなたのphpファイルのロジックを見ることができません。ただし、フォームのデータ（数量、アイテムID）を送信する場合は、フォームデータをシリアル化するだけで十分です。余分なget変数を渡す必要はありません。

     function add(form) {
        $.ajax({
            data: form.serializeArray(),
            url: 'yourfile.php',
            success: function(response) {

                // logic
            }
        });
     }
于 2012-11-22T15:35:31.783 に答える
1

わかりました、私は解決策を見つけました。

フォームはajaxを介して読み込まれるため、jcart.jsによって正しく解釈されませんでした（ただし、関数はすべて正常に機能していました）。

「バインド」は機能しませんでしたが、「ライブ」で修正されました。

$('.jcart').live('submit',function(e) {
  add($(this));
  e.preventDefault();
});
于 2012-11-23T14:09:08.890 に答える