导轨中的Ladda加载按钮

Question

I have a submit button in my rails form that I would like to change to a spinning loading icon when the user hits submit. 我在rails表单中有一个Submit按钮，当用户点击Submit时，我想更改为旋转加载图标。 My app is using bootstrap so I've followed the example provided here . 我的应用程序正在使用引导程序，因此我遵循了此处提供的示例。

The rails code for the submit button looks like: 提交按钮的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 %>

The HTML being rendered looks like: 呈现的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>

I have included ladda.js and spin.js in my assets/javascripts folder. 我在我的asset / javascripts文件夹中包含了ladda.js和spin.js。 ladda-themeless.css is included in my stylesheets controller. ladda-themeless.css包含在我的样式表控制器中。

When I click the next button, the text inside the button changes colour (to a dark grey). 当我单击下一个按钮时，按钮内的文本会更改颜色（变为深灰色）。 Chrome console is now displaying the following error: Chrome控制台现在显示以下错误：

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

Answer 1

Wrap the 包装

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

part into $(document).ready wrapper. 部分放入$（document）.ready包装器中。 If you use Turbolinks, use: 如果您使用Turbolinks，请使用：

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

导轨中的Ladda加载按钮

问题描述

1 个解决方案

解决方案1
0 2014-11-15 16:22:01

导轨中的Ladda加载按钮

问题描述

1 个解决方案

解决方案1 0 2014-11-15 16:22:01

解决方案1
0 2014-11-15 16:22:01