Question

I am working on a custom ecommerce website. If you go to the following link you can view my issue live.

custom ecommerce site »

(username: alex, password: superman)

My problem is that when you click add to cart, my jquery ajax post works great and your item is added to the cart. However, if you first filter by price, THEN try and add to cart, I get a php error. Any ideas why this would be happening…

I’m not super farmiliar with ajax, this is my first super intense ajax project so it may just be something simple like a problem i had earlier where someone introduced me to the live() function in jQuery.

Any help is appreciated. Thanks.

Answer 1

Ok, so your normal “Add to cart” button works with AJAX. So far so good.

What you are missing is that when you are filtering by price, you are (most probably) removing all the items from the list, and adding back only those which meet the price criteria. So far so good too!

After the filtered items are added back, however, you don’t re-initialize the JavaScript bindings on the “Add to cart” buttons.

Wherever you are doing something like:

jQuery('.add-to-cart').bind('click', function(){
  // show lightbox and do some stuff here
}

You need to either call this method / function again, after the filtering is done, or a simpler solution would be to bind the events using live:

jQuery('.add-to-cart').live('click', function(){
  // do the same stuff as above
}

Please note that these pieces of code are only an example, I didn’t actually take your code.