opencart mini cart doesn't auto update when clicked add to cart

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.

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?

Thanks.

Here are the codes: module/cart.tpl

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

view/javascript/common.js

$('#cart > .heading a').live('click', function() {

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



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



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

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

        });

    });

Solution

You need to host a crossdomain.xml file at the root of the remote domain that grants permission to the local domain (or, as in this example, everyone):

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*" />
</cross-domain-policy>

This file must always be at the root of the remote domain, e.g., http://example.com/crossdomain.xml .