Javascript 未执行

Question

我不知道为什么我的 javascript 没有被执行（而且它真的没有被执行）。

/app/assets/javascripts/application.js：

//= require jquery
//= require bootstrap-sprockets
//= require turbolinks
//= require jquery_ujs
//= require_tree .

/app/controllers/project_controller.rb:

def upload
    @projects = Project.all.order(updated_at: :desc)
    @project = Project.find(params[:id])
    respond_to do |format|
        format.html
        format.js {render layout: false}
    end
end

/app/views/projects/show.html.erb：

<%= link_to project_upload_path, :project => @project.id, class: "btn btn-default" do %>
    Upload &nbsp;
    <%= glyph("plus") %>
<% end %>

/app/views/projects/upload.html.erb：

<div class="row">
    <div class="col-xs-12">
        <h2>Upload File to <%= @project.name %> project</h1>
    </div>
    <br>
    <div class="col-xs-12">
        <%= render :partial => "uploadform", :action => "savefile" %>
    </div>
</div>

/app/views/projects/_uploadform.html.erb：

<%= form_for :upload, url: {action: "savefile"}, :multipart => true  do |f| %>
    <%= f.hidden_field(:project_id, :value => params[:id]) %>
    <%= f.file_field :file, input_html: { hidden: true }, label: 'Upload Attachment'  %>
    <input id="file-display" class="input-large uneditable-input" type="text">
    <%= f.submit "Save File", :class => "btn btn-default btn-file", :id => "upload-btn" %>
<% end %>

/app/views/projects/upload.js.erb：

$(document).on('ajax:success', function() {
    alert("Test");
});

我什么都试过了。我在控制器中添加并删除了“{render layout: false}”。我在 upload.js.erb 中尝试了“page:change”和“turbolinks:load”（而不是“ajax:success”）。我在“_uploadform.js.erb”（而不是“upload.js.erb”）中尝试了所有 Java-Ready 函数。我在link_to（show.html.erb）中尝试了“remote：true” - 但它只执行js.erb（只是出现了警报）。我还将 Rails 从 4.2.1 更新到 4.2.7.1，并在 application.js 中尝试了“//= require jquery.turbolinks”（具有上述所有文档就绪功能）。

正如您在我的日志中看到的，它似乎没有用 Javascript 响应：

Started GET "/projects/upload/20" for 127.0.0.1 at 2016-10-05 14:05:48 +0200
Processing by ProjectsController#upload as HTML
  Parameters: {"id"=>"20"}
  Project Load (0.0ms)  SELECT  "projects".* FROM "projects" WHERE "projects"."id" = ? LIMIT 1  [["id", 20]]
  Rendered projects/_uploadform.html.erb (0.0ms)
  Rendered projects/upload.html.erb within layouts/application (2.4ms)
Completed 200 OK in 327ms (Views: 324.8ms | ActiveRecord: 0.0ms)

请帮助我。我不明白为什么这不起作用。

Answer 1

您似乎正在尝试使用 AJAX 请求上传文件，您的表单定义需要 :multipart => true 和 :remote => true。

无法使用远程完成文件上传，但使用 Remotipart gem 可以轻松解决此问题 - 它无需对代码进行任何进一步更改即可启用 AJAX 文件上传。

1. 将 gem 'remotipart' 添加到您的 Gemfile 中
2. 将 //= 要求 jquery.remotipart 添加到 application.js（在 jquery_ujs 之后）
3. 在表单声明中使用 remote: true 和 multipart: true

您现在应该可以异步上传文件了。

更多信息请查看https://github.com/JangoSteve/remotipart

Answer 2

您需要告诉 rails 通过 JavaScript 执行表单的发布。在日志中你可以看到 PagesController 正在渲染 HTML 而不是 JS

Processing by ProjectsController#upload as HTML

尝试将 :remote => true 添加到您的 form_for 助手

<%= form_for :upload, url: {action: "savefile"}, :multipart => true, :remote => true do |f| %> <%= f.hidden_field(:project_id, :value => params[:id]) %> <%= f.file_field :file, input_html: { hidden: true }, label: 'Upload Attachment' %> <input id="file-display" class="input-large uneditable-input" type="text"> <%= f.submit "Save File", :class => "btn btn-default btn-file", :id => "upload-btn" %> <% end %>

有关更多信息，请参阅导轨指南http://guides.rubyonrails.org/working_with_javascript_in_rails.html#form-for。