Bootstrap - кто-нибудь может привести пример, как настроить кнопки JS?

Question

Я играю с кнопками состояния Bootstrap - особенно с Состояние загрузки , но все еще не могу найти подходящую настройку, чтобы заставить его работать.У меня есть простая форма, основанная на AJAX, что-то вроде этого:

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

Но все же, когда я нажимаю кнопку POST , форма отправляется, но эффект кнопки ( загрузка материала ... ) не отображается, как пример на странице Bootstrap.

Может кто-нибудь дать мне совет, как это исправить?

Answer 1

Вам необходимо явно указать, что кнопка находится в состоянии загрузки.Примерно так:

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

Я создал рабочий JSFiddle пример .

Answer 2

В документации Bootstrap первое упоминание о кнопках с состоянием создало у меня впечатление, что все, что мне нужно для включения кнопки с состоянием, это предоставить атрибут data-loading-text:

Добавьте data-loading-text="Loading...", чтобы использовать состояние загрузки для кнопки.

Если вы ищете это поведение (и ожидаете, что оно будет работать на submit, input type="submit" и т. Д.), ЭтоСелектор jQuery должен помочь вам:

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

Но вам все равно нужно будет прикрепить желаемое поведение с помощью обработчика событий, например .click().Это jQuery для кнопки с состоянием в документации (ищите "fat-btn" в этом файле javascript):

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

Итак, сложив все вместе, мы можем сделатьэто:

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

У меня есть рабочий jsfiddle на http://jsfiddle.net/jhfrench/n7n4w/.

Answer 3

Вам не нужен bootstrap-buttons.js. Это HTM5, используйте пользовательские атрибуты. Этот образец не зависит от события клика, это форма отправки

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