I am using EE3 with Cartthrob and am trying to get the shipping to update via ajax. Basically a new customer is checking out and when they are creating their account and they select their state the shipping charge should update based on the shipping table I have created. I have the ajax setup on the page but the shipping charged are not being updated unless I manually reload the page.

How can I troubleshoot to see why ajax isn't working. {!-- ///////// SAMPLE TEMPLATE //////////////// --} {!-- CT ajax uses jQuery. Include your own or EE's included version --} link to --> jquery-1.12.0.min.js {!-- CT uses jQuery form for ajax form submissions --} link to --> jquery.form.js {!-- CT sample templates form for ajax form submissions --} link to --> store/cart.js

jQuery(document).ready(function($){ // this will set JSON as the return data type, and identify update_cart as a callback function var cart_form_options = { success: update_cart, // post-submit callback dataType: 'json' };

// this is the callback script. whenever a form is updated, this script will be called
function update_cart(data, statusText, xhr, $form)  {   
    // "data" is the returned data in json format
    // you can access each of these using data.item_name as shown in the example below
    if (data.success) {                                                   
        // update the XID hash in the form so we don't run afoul of EE's secure forms
        $("input[name=XID]").val(data.XID);
        // using the json data object's data to update various totals. in this case
        $('.cart_tax')          .html( data.cart_tax );
        $('.cart_total')        .html( data.cart_total );
        $('.cart_shipping')     .html( data.cart_shipping );
        $('.cart_subtotal')     .html( data.cart_subtotal );
        $('.cart_discount')     .html( data.cart_discount );
    }  
    return true; 
}

// if any input is changed, the form is sent via ajax. you probably wanna be more selective.
$("input[type=text], select").live('change', function(){
    // finding the form that contains this input
    var form = $(this).closest("form"); 
    // initialize the form
    $(form).ajaxForm(cart_form_options);
    // submit the form. 
    $(form).submit(); 
});

});

when I do n inspect I am seeing this error:

Uncaught TypeError: $(...).live is not a function at HTMLDocument. (checkout:79) at i (jquery-1.12.0.min.js:2) at Object.fireWith [as resolveWith] (jquery-1.12.0.min.js:2) at Function.ready (jquery-1.12.0.min.js:2) at HTMLDocument.K (jquery-1.12.0.min.js:2)

The error is because the .live method in jQuery has been deprecated since jQuery 1.7. You need to modify the line

$("input[type=text], select").live('change', function()

to use the .on() method.

More at jQuery .live method documentation page.

  • that helps. Now when I make a change to the form (ie: change the state) the form updates via AJAX, but now the submit button is disabled and changes to Submitting... This is caused by the cart.js script in cart throb. The shipping charges are NOT updated and the form basically freezes. Only way to complete the checkout is to update the page manually. – Peter Eastwood Aug 7 at 13:58
  • Surely - it sounds like the version of CT3 you are using is in need of updating: I'm pretty sure that the last version I worked with supported JQuery 1.7 (or at least didn't complain about it). I'd get in touch with CartThrob and see if they can provide you with a newer version or log these problems as support issues / bugs. – jcogs.eecms Aug 8 at 12:48

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.