Javascript 未执行

Javascript is not executed

提问人：Jens Schmidt 提问时间：10/5/2016 更新时间：10/6/2016 访问量：1563

问：

我无法弄清楚，为什么我的 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)

请帮帮我。我不明白为什么这无论如何都不起作用。

Ruby-on-Rails-4 Turbolinks 不显眼的 JavaScript

评论

0赞 VLAZ 10/5/2016
我不认为有选择器。你是说ajax:success$(document).ajaxSuccess
0赞 Jens Schmidt 10/5/2016
不。我不知道我从哪里得到它，但它也不适用于“turbolinks：load”和“page：change”。所以，是的，也许“ajax：success”是错误的，但其他选择器也不起作用。
0赞 Alex Zakruzhetskyi 10/5/2016
我不知道它是否有任何区别，但尝试在您的之后加载jquery_ujsjqueryapplication.js
0赞 Jens Schmidt 10/5/2016
不，可悲的是，这没有帮助（即使很艰难，我也只是在 jquery_ujs 之后加载了 jQuery（因为在我看来，我已经在 jQuery 之后加载了 jquery_ujs））。

答：

0赞 Jason Yost 10/6/2016 #1

你需要告诉 rails 通过 JavaScript 执行表单的 post。在日志中，您可以看到 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 轨指南。

评论

0赞 Jens Schmidt 10/6/2016
可悲的是，这也行不通。我还尝试将内容从“upload.js.erb”移动到“_uploadform.js.erb” - 但在日志中，我可以看到，即使我在表单的 HTML 中有 data-remote=“true”，它仍然以 HTML 而不是 JS 呈现。还有其他想法吗？
0赞 Jens Schmidt 10/6/2016
我发现，如果我在我的routes.rb中设置“defaults： {：format => 'js'} ”，我必须从伪造（protect_from_forgery除外：：upload“）创建一个例外，因为错误：”安全警告：另一个站点上的嵌入式<script>标签请求受保护的JavaScript。如果您知道自己在做什么，请继续在此操作中禁用伪造保护，以允许跨域 JavaScript 嵌入。然后 JS 在浏览器中仅显示为文本文件。
0赞 David 10/6/2016 #2

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

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

  1. 将 gem 'remotipart' 添加到您的 Gemfile
  2. 添加 //= require jquery.remotipart to application.js （after jquery_ujs）
  3. 在表单声明中使用 remote： true 和 multipart： true

您现在应该能够异步上传文件。

欲了解更多信息，请查看 https://github.com/JangoSteve/remotipart

评论

0赞 Jens Schmidt 10/6/2016
实际上，我尝试将 Boostrap Design 用于 Filebrowser 按钮。在这种情况下，是否不可能拥有 Javascript（在页面加载后执行任何操作）？
0赞 David 10/6/2016
嗯，这正是 remotipart 给你的。我用更清晰的说明更新了我的答案
0赞 Jens Schmidt 10/6/2016
谢谢你，但它没有像我预期的那样工作。也许我不清楚我想要完成什么。我想在带有“文件浏览”按钮的视图（带有form_for的视图）完成加载时执行 javascript - 而不是在我上传内容之后。即使使用 remotipart，我的 javascript 也不会在此时执行。
1赞 David 10/6/2016
如果我理解正确，您正在尝试呈现上传表单并在 upload.js.erb 中运行代码。Rails 不是这样工作的。upload.js.erb 是作为对控制器上载操作的 AJAX 调用的结果而呈现的，upload.html.erb 是作为对控制器的上载操作的 HTML 调用的结果而呈现的（不是两者）。您在 show.html.erb 中的链接是直接的 html 调用，因此上传通过呈现 upload.html.erb 进行响应。如果要在页面加载时调用（jquery），只需嵌入$（document）.ready（ function（） {...}）;在 html.erb 文件的 <script> 标记中
0赞 Jens Schmidt 10/6/2016
在这种情况下，我认为，我被过去的一些教程误导了 - 我很难，内联脚本是一个坏主意，而不是轨道方式。当然，它的工作原理。多谢！

上一个：远程验证导致提交输入（多个提交按钮）为 null

下一个：如果使用 jquery 动态删除属性 data-val-required，如何添加该属性