Updating A Shopping Cart

I’m building a custom eCommerce store(shopping cart), I’m using ajax(jquery)
to post the Add to Cart button when clicked so the page doesn’t have to
be refreshed, after submitting, the cart is updated and a message is generated by the server-side
script which I display in a div on the page using

$(“#message-div”).html(data);

Now, how do I make this message appear in a pop up
modal dialog instead of that div.

  1. how do I display the new updated cart
    info on the same page (without refreshing).

Thanks.

Hello

For displaying the message in the popup you can use “fancybox”. And for showing the updated information in the cart, you can send a ajax request after every cart operation (add/edit/delete) for calculation of price and total item in cart etc. and update the response in the div were you are showing the current cart information.

FancyBox might be a little overkill for the modal dialogue.
You could also consider using the lightweight leanModal.js
See this thread for details: http://www.sitepoint.com/forums/showthread.php?977520-dialog-box-to-load-on-html-page-open