title: Opencart - Instant update quantity in cart
body: <p>For standard opencart behavior, after adding the product in cart, user needs to click to update button manually for quantity update. For sample, please refer to <a href="http://demo.opencart.com/" rel="nofollow">http://demo.opencart.com/</a>. However, I would like to change to when I change the quantity, the cart info can be refreshed immediately. I've tried following code but it doesn't work:</p>
  
  <ol>
  <li>For catalog/view/theme/default/template/checkout/cart.tpl, I updated:</li>
  </ol>
  
  <blockquote>
    <p>button type="submit" data-toggle="tooltip" title="" class="btn btn-primary">
    i class="fa fa-refresh">/button></p>
  </blockquote>
  
  <p>(don't know why I cannot paste the code properly on the above line. I've removed some &lt; to make it show)</p>
  
  <p>to</p>
  
  <pre><code>&lt;button type="button" data-toggle="tooltip" title="&lt;?php echo $button_update; ?&gt;" class="btn btn-primary" onchange="cart.update('&lt;?php echo $product['key']; ?&gt;', '&lt;?php echo $product['quantity']; ?&gt;');"&gt;&lt;i class="fa fa-refresh"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <ol start="2">
  <li>In catalog/view/javascript/common.js</li>
  </ol>
  
  <p>There is a function</p>
  
  <pre><code>var cart = {
    //skip some lines for other function
      'update': function(key, quantity) {
          $.ajax({
              url: 'index.php?route=checkout/cart/edit',
              type: 'post',
              data: 'key=' + key + '&amp;quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
              dataType: 'json',
              beforeSend: function() {
                  $('#cart &gt; button').button('loading');
              },
              complete: function() {
                  $('#cart &gt; button').button('reset');
              },          
              success: function(json) {
                  // Need to set timeout otherwise it wont update the total
                  setTimeout(function () {
                      $('#cart &gt; button').html('&lt;img src="image/catalog/content/cart/quote-icon.png" alt="quote"&gt;&lt;span class="badge badge-giftu rounded-x"&gt;' + json['totallines'] + '&lt;/span&gt;');
                  }, 100);
  
                  if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') {
                      $('#cart &gt; ul').load('index.php?route=common/cart/info ul li');
                  } else {
                      $('#cart &gt; ul').load('index.php?route=common/cart/info ul li');
                  }
              }
          });
      },
  }
  </code></pre>
  
  <p>I tried if I change to cart.remove under the on.change function, it works. However, it doesn't work for cart.udpate. Is there anyone know what is the issue of triggering the ajax update issue?</p>