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)
