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

Я играю с 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.

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

Ответ 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.

Ответ 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/.

Ответ 3

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

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