Ladda装载按钮在轨道

时间:2014-11-15 16:18:12

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

我的rails表单中有一个提交按钮,当用户点击提交时,我想将其更改为旋转加载图标。我的应用程序正在使用bootstrap,因此我按照提供的示例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>

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

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

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

1 个答案:

答案 0 :(得分:0)

包裹

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

部分进入$(document).ready wrapper。如果您使用Turbolinks,请使用:

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