title: Update cart with ajax
body: <p>Hi I've made an eshop and what I want to achieve is when I click the appropriate "add to cart button" I want the top cart (not the main cart-page of the eshop) to be updated. Top cart is one div at the header of the eshop. When I refresh the page the right content appears but this doesn't happen without refresh. I know this must be accomplished with ajax but it seems I am doing something wrong. </p>
  
  <p>Part of my code:</p>
  
  <pre><code>&lt;input type="button" class="add_to_cart" id="add_to_cart" value="BUY" /&gt;
  &lt;script type="text/javascript"&gt;
      $('input.add_to_cart').click(function () {
          $.ajax({ 
              type: "POST",
              url:"add_to_topcart.php",
              data:$('.prod_form').serialize(), 
              success:function(data){
                  $('#show-quick-cart').text(data); 
                 $(".add_cart_msg").delay(250).fadeIn("slow").delay(2000).fadeOut("slow");
               }
           });
       });
  &lt;/script&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="add_cart_msg" style="display:none;"&gt;&lt;img src="images/green_tick.png"/&gt;Product was added to cart!&lt;/div&gt;
  </code></pre>
  
  <p>The above has a result to temporarily count the products I add to cart</p>