Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

After I placed the jquery-ui in first line file followed by bootstrap file I'm still getting this error:

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

Can anyone help?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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');
over 4 years ago · Santiago Trujillo Report

0

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:)

button group

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!