Bootstrap 的 button.js 和 Turbolinks 问题答案

【问题标题】：Bootstrap's button.js and Turbolinks issueBootstrap 的 button.js 和 Turbolinks 问题
【发布时间】：2014-10-16 14:34:14
【问题描述】：

自定义 CSS 类 .btn-loading 禁用按钮并将其文本设置为加载状态：

$(document).on('click', '.btn-loading', function() {
    var btn = $(this);
    btn.button('loading');

    // Fail-safe for buttons that get stuck in the loading state sometimes.
    setTimeout(function() {
        Rollbar.error("Button stuck");
        btn.button('reset');
    }, 10000);
});

// Be sure to remove any loading state on page refresh
$(document).on('ready page:load', function() {
    $('.btn-loading').button('reset');
});

示例按钮

button type="submit" class="btn btn-primary btn-loading" data-loading-text="Processing..." Continue

按下按钮时，文本将更改为“处理中...”，并且按钮被禁用以防止多次提交。

但是，有时在开发和生产中，按钮会卡在加载状态，并且由于某种原因不会导致新页面的提交和/或呈现。 setTimeout 每天在生产服务器上触发多次。我们很难在开发中始终如一地产生问题。它时不时地随机发生。

Rollbar 的统计数据表明，它不是特定于浏览器的，也不是单个按钮+动作导致的。所以原因也不是服务器响应慢。

知道可能是什么原因造成的以及如何解决吗？

【问题讨论】：

loading 被触发后你的 javascript 做了什么？此操作可能失败或无法正确返回。
你把这个脚本放在文档的什么地方？我已经看到与在 Turbolinks 应用的中包含脚本标签有关的此类问题。

标签： javascript ruby-on-rails-4 twitter-bootstrap-3 turbolinks

【解决方案1】：

前段时间我遇到了类似的问题，并用不同的方法解决了同样的问题。尝试按照以下步骤解决您的问题。

HTML：

将按钮类型从“提交”更改为“按钮”。这将使您可以完全控制执行脚本。

<button type="button" class="btn btn-default" id=”SubmitButton”>Submit</button>

查询：

在按钮单击时，您需要禁用该按钮。这将立即阻止用户再次点击。然后您可以将按钮文本更改为“处理中”。下面的脚本将指导您实现它。

$(function () {

    $('#SubmitButton').click(function (e) {
        e.preventDefault();

        //Disable Button to avoid multiple clicks
        $(this).attr("disabled", true);

       // Change the button text to “Processing”
       $(this).text(‘Processing’);

       // Write Your Validation Scripts
       // If Validation Fails - $(this).text(‘Submit’); $(this).attr("disabled", '');
       // Else Submit Form

       //Submit the Form
       $("#targetForm").submit();

    })
})

【讨论】：

【解决方案2】：

为了防止多次提交，您也可以使用 $.one() 函数。并添加剩余的逻辑。

【讨论】：

【解决方案3】：

按下按钮时，文本变为“处理中...”，并且按钮被禁用，防止多次提交。

-- 请注意，您的代码 sn-p 中没有禁用按钮的部分。

// Fail-safe for buttons that get stuck in the loading state sometimes.
setTimeout(function() {
    // if(stuck){
    Rollbar.error("Button stuck");
    btn.button('reset');
    // } // end-if
}, 10000);

-- 看起来你的后备将永远被执行。按钮卡住时不应该执行吗？

setTimeout 每天在生产中触发多次服务器。

-- 因为您的按钮永远不会被禁用，并且没有任何条件限制它在被点击时触发。

此外，没有像button() 这样的jQuery 方法。看起来您正在使用 jQueryUI，您也应该提到它。但对我来说，jQueryUI + Bootstrap 似乎是一个奇怪的组合。

【讨论】：