Question

我是铁杆的新手，我很难搞清楚魔法中的位置＆＃34;当我的ajaxified表单被提交时，我可以处理一个事件来显示一个ajax加载器，并在我的ajax响应被返回并显示给用户时隐藏加载器。

这里有我的内容，在哪里可以添加.js文件或函数来绑定/运行点击以显示加载程序？我知道我可以在runCMD.js文件中删除加载器。

控制器：

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将被替换为新内容。

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

的同一视图中

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

确保你有jquery。

Rails 4在remote = true表单提交时显示ajax loader

1 个答案: