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

Answer 1

It's caused by jquery-ui and bootstrap-button plugins conflict. In fact jquery-ui code js code should go before bootstrap.js, and that solves the problem.

Just put jquery-ui plugins before bootstrap.js

Answer 2

I am using a bootstrap theme that didn't allow me to re-adjust bootstrap.js and jquery-ui.js... figured it out though, my problem was I had a buttonset() and both the div containing the radio buttons AND the radio buttons had the same name! I removed the name from the buttonset div and it works.

Answer 3

I do not know in what situation this message appears. I had a similar one when I used this code:

HTML:

<button class="btn btn-primary" type="submit" id="update" data-loading-text="Processing <i class='fa fa-spinner fa-spin'></i>">Przelicz <span class="glyphicon glyphicon-play-circle"></span></button>

JAVASCRIPT:

$('body').on('click', '#update', function(e) {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
    $this.button('reset');
}, 8000);
}

I solved this problem differently:

JAVASCRIPT:

$('body').on('click', '#update', function(e) {
var html = $(this).data('loading-text');
$(this).html(html);
}

I think that if it does not solve your problem in 100% it may help in another way to get around it.

Answer 4

Another solution is to add this line after bootstrap:

$.fn.btnBootstrap = $.fn.button.noConflict();

and then when calling the loading and reset:

$btn.btnBootstrap('loading');
$btn.btnBootstrap('reset');

Answer 5

This answer is basically in line with some of the other answers that suggest: Load bootstrap last. This answer just adds more information.

I've seen this when using Bootstrap 2.3.2 and jQuery UI 1.10. As described in bootstrap bug #6094 they both want to implement:

jQuery(selector).button()

And so the one that gets loaded last "wins".

And so specifically, if jQueryUI is loaded last, then this standard bootstrap 2.3.2 button group markup doesn't work:

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="cm-toggle-btn toggles btn btn-mini active" name="foo">
    Foo
  </button>
  <button type="button" class="cm-toggle-btn toggles btn btn-mini active" name="bar">
    Bar
  </button>
</div>

(it creates a button group that looks like this:)

When you click on one of the buttons in the button group, jQueryUI's .button() is called and generates the Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' error.

One can change the order and load bootstrap last, but then jQuery UI's $().button(), (and hence .slider() and .dialog() too) stop working. :-(

Since, alas, we needed both to work, we did this: For other reasons, it was complicated for us to load jQueryUI first, so around jQueryUI, we put:

<script>
    let bootstrapButton = jQuery.fn.button;
</script>

<script src="jqueryUIsource.js"></script>

<script>
    jQuery.fn.jQueryUIButton = jQuery.fn.button;
    jQuery.fn.button = bootstrapButton;
</script>

And then, in the sections of the page where jQueryUIs bootstrap was required, temporarily re-instate jQueryUI's .button() implementation (stored in jQuery.fn.jQueryUIButton) as jQuery.fn.button. It is a messy hack but sorta works. I don't think we can do better if we want to load both on the same page.

This codepen demonstrates that it can be brought to work.