Dynamically change content using javascript/jQuery

I have a virtual store and a shopping basket. Also, I have in every page an info note about how many products one has in the basket开发者_如何学Python and the total sum (my basket area).

The problem is that the basket uses jQuery to update and delete elements but the 'my basket' area on every page has behind a simple query in the database and it doesn't update except at page refresh.

Is there any solution to synchronise the basket javascript logic with the 'my basket area'?

---

The answer from alex was short but right to the point.

You could use XmlHttpRequest to make a GET request to a server side page in which you return a JSON string representing your basket products. Then you can use JQuery to create this elements in your page's DOM.

I think JQuery itself has some sort of abstraction of XmlHttpRequest.

---

I don't know what store you are using but you will have to figure it mostly out. Here is an example of what you'd do.

$('.addToCart').click(function(){
    //Whatever stuff
    $.get('updateCart.php?action=add&item=' + $(this).attr('id') + '&time=' new Date().getTime(), function(data)
    {
        alert(data); //the response
    }
});

---

Yes, you can have your JavaScript code that's dynamically updating the basket in-page also send off update events to the server via "ajax". jQuery provides a variety of useful ajax utilities for doing these sorts of updates.

I would suggest that the server have the "canonical" version of the basket, and that all update operations receive back a copy of the current contents of the basket and use that to adjust what's displayed on the page. This is because users are chaotic and you never know when they might use "open in new tab/window". An update to the server is an opportunity to get the latest information.

So for example, if the user removes an item, this pseudo-code:

$.ajax({
    url:      "url_of_basket_handler",
    data:     {remove: productId},
    success:  updateBasketOnSuccess,
    error:    basketErrorHandler
});

...where updateBasketOnSuccess is a function used by all of your handlers to update the displayed contents of the basket based on the response:

function updateBasketOnSuccess(data) {
    // Use the given data to update the display
}

...and similarly basketErrorHandler handles telling the user there's been an error in the ajax call:

function basketErrorHandler(jxhr, statusCode, err) {
    // Tell the user something went wrong
}

I'd probably have the basket handler reply using JSON to list the basket contents and other meta-data.

---

Best AJAX Reference:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

var ajax_load = "<img src='img/load.gif' alt='loading...' />";    
var loadUrl = "getbasket.php";  
$("#mybasket").html(ajax_load).load(loadUrl, null);

Then getbasket.php just needs to grab the data from db and output (echo/print) the basket html for example..

<?php
//Connect to mysql db and query
$dbvariables = mysql_fetch_array(...);
?>
My Basket
Items: <?php echo $dbvariables[item_count]; ?>
<?php
for($i=1;$i<=$dbvariables[item_count];$i++){
//Show items in basket..
}
?>

Or something like that, I don't know what your basket looks like.

Again, look here http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

---

You want to use XmlHttpRequest, otherwise known as the AJAX functions in jQuery.

Simply post your cart's state back to the server (on add/update/delete), and then update the user's cart in the database.

This will keep them both in sync.