Question

I’m using jQuery to post data and update two DOM elements with JSON encoded data returned by the called PHP function.

The problem I’m having is that the #cart_value and #cart_num_items elements in the code below are not being updated on an initial post – if I trigger the post a second time or more, it works as it should and the elements are updated.

This behaviour is very consistent and if I navigate to another page that contains the triggering link the same thing happens.

The behaviour is also identical without the transfer function and without using the dynamically added (.live) elements.

I’m using ‘jQuery’ instead of ‘$’ to avoid any potential conflicts with other libraries the end user may have running.

Any help is greatly appreciated.

My code is:

jQuery("a.add_to_cart").live("click", function(){
    var product_id = jQuery(this).attr('href');
    jQuery("img#product_image_" + product_id).effect("transfer", { to: jQuery("div#cart") }, 600,function(){
        jQuery.post(model, { action : "add_item_to_cart", product_id : product_id, user_id : user_id }, function(data){
            jQuery("span#cart_value").html(data.value);
            jQuery("span#cart_num_items").html(data.qty);
        }, "json");
    });
    return false;
});

Answer 1

Try quoting your json keys:

jQuery("a.add_to_cart").live("click", function(){
    var product_id = jQuery(this).attr('href');
    jQuery("img#product_image_" + product_id).effect("transfer", { "to": jQuery("div#cart") }, 600,function(){
        jQuery.post(model, { "action" : "add_item_to_cart", "product_id" : product_id, "user_id" : user_id }, function(data){
            jQuery("span#cart_value").html(data.value);
            jQuery("span#cart_num_items").html(data.qty);
        }, "json");
    });
    return false;
});

Also, where is model defined, and where is user_id defined??