Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

749
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda