opencart mini cart doesn't auto update when clicked add to cart
<p>There is a problem with the mini cart for opencart on the header. I tried some solutions through the internet but none of the solutions worked and some of the solutions are just the same with code I have. </p>

<p>When I clicked add to cart of a product, the minicart doesn't update, but when I clicked the minicart, the cotents will load and that's the time it will update the mini cart. How to auto update the minicart without clicking it? </p>

<p>Thanks. </p>

<p>Here are the codes: 
module/cart.tpl</p>

<pre><code>&lt;div class="heading"&gt; &lt;i class="fa fa-shopping-cart "&gt;&lt;/i&gt; &lt;div class="cart-inner"&gt; &lt;h4&gt;&lt;?php echo $heading_title; ?&gt;&lt;/h4&gt; &lt;a&gt;&lt;span id="cart-total"&gt;&lt;?php echo $text_items; ?&gt;&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt;
</code></pre>

<p>view/javascript/common.js</p>

<pre><code>$('#cart &gt; .heading a').live('click', function() {

        $('#cart').addClass('active');



        $('#cart').load('index.php?route=module/cart #cart &gt; *');



        $('#cart').live('mouseleave', function() {

            $(this).removeClass('active');

        });

    });
</code></pre>