ruby-on-rails - Rails 4 在remote=true 表单提交时显示ajax 加载器

Question

我是rails新手，无法弄清楚在“魔法”中我可以在哪里处理一个事件，以便在提交ajax化表单时显示ajax加载器，并在返回并显示ajax响应时隐藏加载器给用户。

这是我所拥有的，在哪里可以添加 .js 文件或函数来绑定(bind)/运行以显示加载程序？我知道我可以删除 runCMD.js 文件中的加载程序。

Controller :

def runCMD

    @cmdType = params['commit'].downcase #commit is name of submit button clicked

    //do some stuff, removed for brevity...
    @output = //buncha stuff that happens, but returns output of the commands ran
    @outputVersions = //buncha other stuff, but sets this var

    respond_to do |format|
            format.js   { }
    end

    #render 'testServer'

end

查看:

<%= form_tag('/runCMD', :method => 'post', :remote => true) do %>
    <%= select("versions", "version", @outputVersions) %>
    <%= submit_tag "Activate", class: "run-cmd-button" %>
    <%= submit_tag "Stop", class: "run-cmd-button" %>
    <%= submit_tag "Start", class: "run-cmd-button" %>
    <%= hidden_field_tag 'component', @component %>
<% end %>

<br />
<div id="ajax_output" contenteditable="true" style="background-color:black;font-size:10pt;font-family:Courier New;overflow-y:auto;height:1000px;width:1180px;">

</div>

.js 文件

  $('#ajax_output').html("<%= escape_javascript(render partial: 'cmdOutput', locals: { output: @output } ) %>");

部分

<% output.each do |line| %>
    <% line.gsub! '[33m', '<font color="yellow">' %>
    <% line.gsub! '[32m', '<font color="green">' %>
    <% line.gsub! '[31m', '<font color="red">' %>
    <% line.sub! '[0m', '<font color="white">' %>
    <% line.sub! '[0m', '</font>' %>
    <% line.gsub! '[0m', '' %>

    <%= raw(line) %>
    <br />
<% end %>

Answer 1

您可以在 jquery 提交表单事件中添加 ajax 加载器。

$( "form" ).submit(function( ) {
  $('#ajax_output').html("loading...")
});

现在，如果 ajax 成功，您的 ajax_output div html 将被新内容替换。

根据您的评论，您可以将其添加到您拥有表单的同一 View 中

<script type="text/javascript">
     $( "form" ).submit(function( ) {
      $('#ajax_output').html("loading...")
    });
</script>

确保你有jquery。