导轨中的 Ladda 加载按钮答案

【问题标题】：Ladda loading button in rails导轨中的 Ladda 加载按钮
【发布时间】：2015-01-12 21:36:31
【问题描述】：

我的 Rails 表单中有一个提交按钮，我想在用户点击提交时将其更改为旋转加载图标。我的应用正在使用引导程序，所以我遵循了here 提供的示例。

提交按钮的 Rails 代码如下所示：

<%= content_tag :button, :class => "btn btn-u ladda-button", :type => "submit", :data => { :style => 'expand-left' } do %>
  <span class="ladda-label">Next</span>
  <span class="ladda-spinner"></span>
<% end %>

正在渲染的 HTML 如下所示：

# in <head>
<script type="text/javascript">
        $(document).ready(function(){
            Ladda.bind( '.ladda-button' );
        });
</script>

# submit button at the end of my rails form_for
<button class="btn btn-u ladda-button" data-style="expand-left" type="submit">
  <span class="ladda-label">Next</span>
  <span class="ladda-spinner"></span>
</button>

我已将 ladda.js 和 spin.js 包含在我的 assets/javascripts 文件夹中。 ladda-themeless.css 包含在我的样式表控制器中。

当我单击下一个按钮时，按钮内的文本会改变颜色（变为深灰色）。 Chrome 控制台现在显示以下错误：

Uncaught TypeError: undefined is not a function application.js:17884createSpinnerapplication.js:17884instance.start application.js:17577(anonymous function)

【问题讨论】：

@JTG 没有。这个表单只是完成了一个本地对象的基本保存功能。但是，它确实通过模型中的 after_commit 调用通过第 3 方 API 推送从表单收集的数据。
控制台错误？你能看到你的浏览器开发视图中是否正在加载 css/js 吗？
@JTG chrome 控制台没有任何错误。当我在 chrome 开发工具中搜索 application.css 和 application.js 时，我确实看到文件 ladda js 和 css 文件正在加载。
您是否尝试过确保 spin.js 在 ladda.js 之前加载？这对我有用。

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

【解决方案1】：

包装

Ladda.bind( 'input[type=submit]' );

部分放入 $(document).ready 包装器。如果您使用 Turbolinks，请使用：

$(document).on('ready page:load', function(){
  Ladda.bind('.ladda-button');
});

【讨论】：

我已经将我的原始 JS 包装在一个文档就绪包装器中，但我仍然收到相同的结果。我已经在#head JS 部分用你的建议更新了我的问题。
我已经更新了绑定到类而不是按钮的答案。
我已经绑定了课程。我会用代码更新我的 q 。但是，当我单击按钮时，按钮内的文本颜色会发生变化（朝着正确的方向前进）。我现在在控制台中遇到错误（在我的问题中添加）。感谢您继续尝试和帮助。我应该将 js 的缩小版本放在我的资产文件夹中而不是完整大小的文件夹中吗？
它不依赖于完整/缩小的源。你在你的 application.js 中需要它吗？此外，如果您删除该脚本代码，并从 Chrome 控制台手动执行 Ladda.bind('.ladda-button');，它会引发该错误吗？
当我运行命令时，我得到一个未定义的错误。它还使用微调器类在按钮中创建一个跨度。