1

在我的网站上，我正在使用 jquery ajax 调用动态加载带有“添加到购物车”按钮的购物产品。对于购物车本身，我使用 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>

可以在此处找到带有 ajax 调用的 jcart 插件：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

Ok, I found the solution.

As the forms are loaded via ajax, they were no correctly interpreted by jcart.js (though the functions all worked fine for themselves).

"bind" didn't work, but "live" fixed it:

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

I'm guessing you are calling the loadProducts() function in a binded click action on your add to cart button. If you are using an element with a default click behavior. You might want to prevent that with a 'return false;' on the last line of your binded click function.

like this:

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

After your success function there's also a comma that might get messy in IE:

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

Remove the comma

I think there's an error in your ajax call, try to work it out... i cant see the logic of your php file that adds products to your basket. but if you want to send the data of your form (quantity, itemid), serializing your form data should be enough. No need to pass extra get variables.

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

                // logic
            }
        });
     }
于 2012-11-22T15:35:31.783 回答