Question

我正在使用Bootstrap的stateful buttons - 特别是加载状态，但仍无法找到正确的设置以使其正常工作。我有一个基于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 example。

Answer 2

在Bootstrap文档中，the first mention of stateful buttons给我的印象是，我需要启用有状态按钮才能提供data-loading-text属性：

添加data-loading-text="Loading..."以使用按钮上的加载状态。

如果您正在寻找此行为（并且还希望它可以在submit，input type="submit"等）上运行，那么这个jQuery选择器应该可以帮到您：

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

但是你仍然需要通过事件处理程序附加你想要的行为，比如.click()。这是the jQuery for the stateful button in the documentation（在该javascript文件中查找“fat-btn”）：

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

我有working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/。

Answer 3

您不需要bootstrap-buttons.js。那就是HTM5，使用自定义属性。此示例不依赖于click事件，而是表单提交

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

Bootstrap - 任何人都可以给我任何例子，如何设置JS按钮？

3 个答案: