web-dev-qa-db-fra.com

Bootstrap - Quelqu'un pourrait-il me donner un exemple, comment configurer les boutons JS?

Je joue avec les boutons stateful de Bootstrap - en particulier avec Loading state, mais je ne parviens toujours pas à trouver la configuration adéquate pour le faire fonctionner. J'ai un formulaire simple basé sur AJAX, quelque chose comme ça:

<%=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%>

Mais quand je clique sur le bouton POST, le formulaire est envoyé, mais l'effet du bouton (loading stuff ...) ne s'affiche pas, comme dans l'exemple de la page de Bootstrap.

Quelqu'un pourrait-il me donner un conseil sur la façon de le réparer?

jquerycssruby-on-rails-3buttontwitter-bootstrap
20
user984621

Vous devez définir explicitement que le bouton est à l'état de chargement. Quelque chose comme ça:

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

J'ai créé un exemple de travail JSFiddle .

39
mmcnickle

Dans la documentation Bootstrap, la première mention des boutons avec état m'a donné l'impression que tout ce dont j'ai besoin pour activer le bouton avec état est de fournir l'attribut data-loading-text:

Ajoutez data-loading-text="Loading..." pour utiliser un état de chargement sur un bouton.

Si vous recherchez ce comportement (et attendez-vous également à ce qu'il fonctionne sur submit, input type="submit", etc.), ce sélecteur jQuery devrait faire l'affaire pour vous:

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

Mais vous devrez toujours attacher votre comportement souhaité via un gestionnaire d'événements, tel que .click(). Ceci est le jQuery pour le bouton stateful dans la documentation (recherchez "fat-btn" dans ce fichier javascript):

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

Donc, en mettant cela ensemble, nous pouvons faire ceci:

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

J'ai un jsfiddle de travail à http://jsfiddle.net/jhfrench/n7n4w/ .

4
Jeromy French

Vous n'avez pas besoin de bootstrap-buttons.js. C'est HTM5, utilisez les attributs personnalisés. Cet exemple ne dépend pas de l'événement click, il s'agit d'un formulaire de soumission

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