jquery - ejemplos - Bootstrap: ¿alguien podría darme algún ejemplo de cómo configurar botones JS?

tooltips bootstrap

Question

Estoy jugando con los botones con estado de Bootstrap, específicamente con el estado Cargando , pero todavía no puedo encontrar la configuración correcta para que funcione. Tengo un formulario simple basado 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 así, cuando hago clic en el botón POST , el formulario está enviando, pero el efecto del botón ( cargar cosas ... ) no se muestra, como el ejemplo en la página de Bootstrap.

¿Alguien podría darme un consejo sobre cómo solucionarlo?

Answer 1

En la documentación de Bootstrap, la primera mención de botones con estado me dio la impresión de que todo lo que necesito para habilitar el botón stateful es proporcionar el atributo data-loading-text :

Agregar data-loading-text="Loading..." para usar un estado de carga en un botón.

Si está buscando este comportamiento (y también espera que funcione en submit , input type="submit" , etc.), este selector de jQuery debería ser el truco para usted:

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

Pero aún deberá adjuntar su comportamiento deseado a través de un controlador de eventos, como .click() . Este es el jQuery para el botón stateful en la documentación (busque "fat-btn" en ese archivo javascript):

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

Entonces, juntando todo eso, podemos hacer esto:

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

Tengo un jsfiddle en http://jsfiddle.net/jhfrench/n7n4w/ .

Answer 2

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

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
});

Answer 3

Debe configurar 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'');
}

Creé un ejemplo de JSFiddle en funcionamiento.