Question

在我使用Turbolinks的Rails 4应用程序中，我有以下形式：

<%= form_for [@calendar, @post], html: { multipart: true } do |f| %>
[...]
  <div class="actions" id="post_submit_before_spinner">
    <%= f.submit @post.new_record? ? "CREATE POST" : "UPDATE POST", :id => :post_submit %>
  </div>
  <div class="spinner" id="post_submit_spinner">
    <i class="fa fa-refresh fa-spin"></i> Please wait...
  </div>
<% end %>

我希望在提交表单时使用JavaScript显示当前位于post_submit_spinner div中的微调器。

我在app/assets/javascripts/posts.coffee：

中有这个

$(document).ready ->
  $('#post_submit_spinner').hide()
  return

$(document).getElementById('post_submit').on click() ->
  $('#post_submit_spinner').show()
  return

微调器在页面加载时隐藏 - 这就是我想要的 - 但是当用户使用post_submit_before_spinner div中的按钮提交表单时它不会显示。

知道我的代码有什么问题吗？

Answer 1

我建议在$.ready函数调用中添加click侦听器定义（因为post_submit元素尚未出现），如下所示：

$(document).ready ->
  $('#post_submit_spinner').hide()
  $('#post_submit').on click() ->
    $('#post_submit_spinner').show()
    return
  return

Answer 2

我使用$('.surroundpre').prepend('$SelectButton');中的以下代码解决了问题：

app/assets/javascripts/posts.coffee

Rails 4：在表单提交时使用javascript显示微调器

2 个答案: