更新页面加载

At the moment, the following JavaScript updates the cart's values on click when the "add to cart" button is clicked.

I am trying to make the values update on pageload, when page is loaded or refreshed.

At the moment the values only update on click:

<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/cart/add',
        type: 'post',
        data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-cart').button('loading');
        },
        complete: function() {
            $('#button-cart').button('reset');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');

            if (json['success']) {
                $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

                $('html, body').animate({ scrollTop: 0 }, 'slow');

                $('#cart > ul').load('index.php?route=common/cart/info ul li');
            }
        },
    });
});
//--></script>

I have tried many things and have had no luck I have tried to load the values in using this (which doesn't do anything):

function readyFn( jQuery ) {
    $('#cart > button').load(function() {

                $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

                $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

                $('html, body').animate({ scrollTop: 0 }, 'slow');

                $('#cart > ul').load('index.php?route=common/cart/info ul li');


}); 

$( document ).ready( readyFn );
// or:
$( window ).on( "load", readyFn );
}

Just wondering if anyone can help me with how to load on refresh / page load in the same manner it updates on click.

Thanks in advance.

You seem to have misplaced your closing brace on readyFn, so the document ready handler was inside the function. Also, you don't need to do anything when the button loads ( $('#cart > button').load ) because you're already waiting for the document to be ready before calling the function. Try something like this:

$(function() {
    $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
    $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    $('#cart > ul').load('index.php?route=common/cart/info ul li');
});

Note that $(function(){}) is just a shorthand for $(document).ready(function(){}).