Mostrar cargando… usando jquery en bootstrap 4 con texto de carga de datos

este problema se puede tratar de variadas maneras, sin embargo te compartimos la resolución más completa en nuestra opinión.

Solución:

no estoy seguro de .button() El método en Bootstrap v4 tiene las opciones que está tratando de usar. El Codepen al que se vincula utiliza Bootstrap v3.

Así es como podría replicar el mismo comportamiento con Bootstrap 4.

$(document).ready(function() 
  $('.btn').on('click', function() 
    var $this = $(this);
    var loadingText = ' loading...';
    if ($(this).html() !== loadingText) 
      $this.data('original-text', $(this).html());
      $this.html(loadingText);
    
    setTimeout(function() 
      $this.html($this.data('original-text'));
    , 2000);
  );
)

  Submit Order

Esta característica está obsoleta desde la versión 3.3.5 y se eliminó en la versión 4. Fuente

Me encontré con este mismo problema hace unos días y nadie parece tener una solución. Así que aquí está mi complemento jQuery que parece proporcionar el mismo comportamiento en Boostrap 4.

(function($) 
    $.fn.__bs4_btn = $.fn.button;
    $.fn.button = function(action) 
        if (action === 'loading' && this.data('loading-text')) 
            this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
        
        if (action === 'reset' && this.data('original-text')) 
            this.html(this.data('original-text')).prop('disabled', false);
        
        return this.__bs4_btn(action);
    ;
(jQuery));

Más detalles: Cómo continuar usando botones con “texto de carga de datos” en Bootstrap 4 con jQuery (mi blog)

Te mostramos las comentarios y valoraciones de los lectores

Al final de todo puedes encontrar las notas de otros administradores, tú asimismo eres capaz insertar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador