Bootstrap - bất cứ ai có thể cho tôi bất kỳ ví dụ nào, cách thiết lập các nút JS không?

Question

Tôi đang chơi với Bootstrap's stateful buttons - cụ thể với Trạng thái tải, nhưng vẫn không thể tìm thấy thiết lập phù hợp để làm cho nó hoạt động. Tôi có một hình thức đơn giản dựa trên AJAX, một cái gì đó như thế:

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

Nhưng vẫn khi tôi nhấp vào nút POST, vì vậy các mẫu được gửi, nhưng tác dụng nút (tải thứ ...) không được hiển thị, như ví dụ trên trang Bootstrap.

Có ai có thể cho tôi mẹo về cách khắc phục không?

Answer 1

Bạn cần đặt rõ ràng rằng nút đang ở trạng thái tải. Một cái gì đó như thế này:

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

Tôi đã tạo một hoạt động JSFiddle example.

Answer 2

Trong tài liệu Bootstrap, the first mention of stateful buttons đã cho tôi ấn tượng rằng tất cả những gì cần phải kích hoạt nút stateful là để cung cấp các data-loading-text thuộc tính:

Thêm data-loading-text="Loading..." sử dụng trạng thái tải trên một nút.

Nếu bạn đang tìm kiếm hành vi này (và cũng có thể mong đợi nó để làm việc trên submit, input type="submit", vv), selector jQuery này nên làm các trick cho bạn:

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

nhưng bạn sẽ vẫn cần phải đính kèm hành vi mong muốn của bạn thông qua trình xử lý sự kiện, chẳng hạn như .click(). Đây là the jQuery for the stateful button in the documentation (tìm kiếm "chất béo-btn" trong đó tập tin javascript):

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

Vì vậy, đặt tất cả lại với nhau, chúng ta có thể làm điều này:

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

Tôi có một working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/.

Answer 3

Bạn không cần bootstrap-buttons.js. Đó là HTM5, sử dụng các thuộc tính tùy chỉnh. Mẫu này không phụ thuộc vào sự kiện nhấp chuột, đó là biểu mẫu gửi

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