Rails 4：在表单提交上显示带有 javascript 的微调器答案

【问题标题】：Rails 4: display spinner with javascript on form submitRails 4：在表单提交上显示带有 javascript 的微调器
【发布时间】：2016-03-21 22:21:31
【问题描述】：

在我使用 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 中的按钮提交表单时它不会显示。

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

【问题讨论】：

标签： javascript ruby-on-rails forms ruby-on-rails-4 coffeescript

【解决方案1】：

我建议在$.ready 函数调用中添加点击监听器定义（因为post_submit 元素还不能存在）如下：

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

【讨论】：

感谢您的回答。我明白你的意思，这是有道理的。我实现了代码，它似乎还没有工作。我在控制台中收到以下错误：Uncaught TypeError: $(...).getElementById is not a function。有什么想法吗？
@ThibaudClement，很高兴知道...如果有帮助，请选择最佳答案:)
好吧，正如我在评论中提到的，它还没有工作。如果没有解决问题，则无法接受。
$(document) 返回的 jquery 对象没有getElementById 函数。使用$('#post_submit') 而不是$(document).getElementById('post_submit')。
@ThibaudClement 查看我的编辑。感谢 ihaztehcodez 指出

【解决方案2】：

我用app/assets/javascripts/posts.coffee中的以下代码解决了这个问题：

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

$(document).ready ->
  $("#post_submit_before_spinner").click ->
    $('#post_submit_spinner').show()
    return
  return

【讨论】：