Update script works in all browsers except Edge

Question

I've made a script that submit multiple forms to a shopping cart with one button. After the submit is done a new function updateCartAjax() is fired to update the cart content without actually going to the cart page.

This script works fine in all browsers except for Edge. Somehow it looks like that adding the forms to the cart functions correctly but updating the cart isn't.

When I clear my cookies it function correctly the first time. When adding other stuff to the cart then the function updateCartAjax() isn't fired. However pressing F5 works.

Is there anything in my script that I have missed and could cause the updateCartAjax() not to work? I don't get any errors in my console in any browser whatsoever!!

My script

// forms look like

    
    
    
    
    



function updateCartAjax() {
    $.get("/cart/?format=json", function(e) {
        var a = getAjaxTranslation,
            t = [],
            i = e.shop.currency2;
        if (e.page.cart) {
            e.page.cart.products.forEach(function(e) {
                t.push('                    
                   ' + (e.brand.title ? "" + e.brand.title + "" : "") + "       " + e.title + '        ' + e.variant + "          
          " + e.quantity + 'x      ' + i.symbol + e.price.price + "    
  ")
            });
            var s = '            
              ' + e.page.cart.products.length + " " + a("Items") + '        ' + i.symbol + e.page.cart.total.price.toFixed(2).replace(/\./g, ',') + '      
    
          ' + t.join("") + '
                      ' + a(e.shop.b2b ? "Total excl. VAT" : "Total") + "" + i.symbol + e.page.cart.total.price.toFixed(2) + '
      
                 ' + a("Edit") + '          ' + a("Checkout") + "        
    
  "
        }
        $("#cart").html(s)
    })
}



  var state = false;

  $(document).ready(function() {
    $('.temp-cart .addToCart').click(function() {
      go();

      // get all forms on the page
      $forms = $('.temp-cart form');
      sent = 0;

      // post the form (non-async)
      $forms.each(function() {
        if(state) {
          var qty = $(this).find('.amt').text();
          var qty2 = parseInt(qty);
          var url = $(this).attr('action')+'?quantity='+qty2+'/';
          $.ajax({
            type: "post",
            async: false,
            url: url,
            data: $(this).serialize(),
            success: function(data) {
              if(++sent == $forms.length) {
                console.log('All forms are submitted!');

               // updateStuff();
                updateCartAjax();

              }
            }
          });
        } else { return false; }
      });
      stop();
    });

    function go() {
      if(!state) {
        state = true;
        $('.temp-cart .addToCart').button('loading');
        $('input[type=button], input[type=submit]').attr("disabled", "disabled");
      }}

    function stop() {
      if(state) {
        state = false;
        $('.temp-cart .addToCart').button('reset');
        $('input[type=button], input[type=submit]').removeAttr("disabled");
      }}
  });

Rion Williams · Accepted Answer

Sounds Like Caching

This sounds like a scenario that might be prone to being frequently cached. Internet Explorer and Edge in my experience can be quite aggressive with regards to AJAX caching and disabling it might help you resolve this.

You can explicitly turn off AJAX caching via the following snippet of code within your document-ready function :

$(document).ready(function() {
     // Disable AJAX-based caching
     $.ajaxSetup({ cache: false });

     // Other code omitted for brevity
});

This is obviously a more global solution, however you can set the cache property during individual AJAX requests as you might expect :

$.ajax({
    method: 'GET',
    url: '...',
    cache: false,
    success: function(){

    }
});

or by just appending a querystring value to the URL that you are requesting :

// Using a timestamp will ensure the request isn't cached
$.get("/cart/?format=json&dt=" + (new Date()).getTime(), function(e) {

});

Use The Developer Tools (F12) If the issue persists, consider using the Developer Tools (F12) within your browser and monitoring the Network tab to see if the actual requests are being made and if they are either failing or just being returned from the cache.

Update script works in all browsers except Edge

Answers (1)

Related Questions