CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user123123
user123123

Reputation: 83

JQuery Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

Could someone please explain this console error and how I can fix it?

Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'

This is the page where it's occurring, when clicking the add to cart button & viewing the console in chrome developer tools: http://tinyurl.com/pqb7wyr

Cart Button:

<button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn-outline-inverse">Add to Cart</button>

Javascript:

<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['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    var element = $('#input-option' + i.replace('_', '-'));

                    if (element.parent().hasClass('input-group')) {
                        element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    } else {
                        element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
                    }
                }
            }

            if (json['error']['recurring']) {
                $('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
            }

            // Highlight any found errors
            $('.text-danger').parent().addClass('has-error');
        }

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

            $('#cart-total').html(json['total']);

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

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

I've read that I should reorder scripts to load boostrap js after all jquery and jquery plugins js to resolve the error, but this didn't fix it.

Upvotes: 2

Views: 5470

Answers (2)

Cart Binder
Cart Binder

Reputation: 21

For me it was fixed by placing jquery-ui.min.js file before bootstrap.js

Just click ctrl+u on page you receive error and check in <head> part if jquery-ui file is called after bootstrap.js This may be the cause of error.

Placing jquery-ui before calling bootstrap.js will fix the issue.

Upvotes: 2

Musa
Musa

Reputation: 97672

Try initializing #button-cart as a button before the beforeSend event fires

$('#button-cart').button().on('click', function() {

Upvotes: 1

Related Questions