Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

740
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda