Bootstrap - ¿alguien podría darme algún ejemplo, cómo configurar botones JS?

Question

Estoy jugando con stateful buttons de Bootstrap - específicamente con Estado de carga, pero todavía no puedo encontrar la configuración correcta para que funcione. Tengo una forma sencilla basada en AJAX, algo así:

<%=form_tag '/comments', :remote => true do %> 
    <div><%=text_area_tag 'comment[text_comment]'%></div> 
    <div><button class="btn btn-primary" data-loading-text="loading stuff..." >Post</button></div> 
<%end%> 

Pero aún cuando hago clic en el botón POSTAL, por lo que la forma es el envío, pero el efecto botón (carga cosas ...) no se muestra, como el ejemplo en la página de Bootstrap.

¿Alguien me puede dar un consejo sobre cómo solucionarlo?

Answer 1

Debe establecer explícitamente que el botón está en el estado de carga. Algo como esto:

// Set up the buttons 
$(button).button();  
$(button).click(function() { 
    $(this).button('loading'); 
    // Then whatever you actually want to do i.e. submit form 
    // After that has finished, reset the button state using 
    // $(this).button('reset'); 
} 

He creado un JSFiddle example de trabajo.

Answer 2

En la documentación Bootstrap, the first mention of stateful buttons me dio la impresión de que todo lo que necesito para activar el botón de estado es proporcionar el atributo data-loading-text:

Añadir data-loading-text="Loading..." utilizar un estado de carga en un botón.

Si usted está buscando para este comportamiento (y también esperar que funcione en submit, input type="submit", etc), este selector jQuery debe hacer el truco para usted:

$(':input[data-loading-text]') 

Pero usted todavía debe adjuntar su comportamiento deseado a través de un controlador de eventos, como .click(). Esta es the jQuery for the stateful button in the documentation (busque "grasa-BTN" en ese archivo javascript):

.click(function() { 
    var btn = $(this) 
    btn.button('loading') 
    setTimeout(function() { 
     btn.button('reset') 
    }, 3000) 
}) 

lo tanto, poner que todos juntos, podemos hacer esto:

$(':input[data-loading-text]').click(function() { 
    var btn = $(this) 
    btn.button('loading') 
    setTimeout(function() { 
     btn.button('reset') 
    }, 3000) 
}) 

Tengo un working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/.

Answer 3

No necesita bootstrap-buttons.js. Eso es HTM5, usa los atributos personalizados. Esta muestra no depende del evento click, es un formulario enviar

var btn = $(this).find("input[type=submit]:focus"); 
// loading 
var loadingText = btn.data('loadingText'); 

if (typeof loadingText != 'undefined') { 
    btn.attr("value", loadingText); 
} 
else { 
    btn.attr("value", "Loading..."); 
} 
btn.attr("disabled", true); 

$.ajax({// long task 
    complete: function() { 
    // reset.. the same 
});