Javascript is not executed

Question

i cant figure out, why my javascript is not executed (and its really not executed).

/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");
});

I tried everything. I added and removed "{render layout: false}" in my controller. I tried "page:change" and "turbolinks:load" in my upload.js.erb (instead of "ajax:success"). I tried all of the Java-Ready functions in "_uploadform.js.erb" (instead of "upload.js.erb"). I tried "remote: true" in link_to (show.html.erb) - but then it only executes js.erb (just the alert came up). I also updated Rails from 4.2.1 to 4.2.7.1 and tried "//= require jquery.turbolinks" in application.js (with all the document ready functions above).

As you can see in my log, it seems that it doesnt respond with the 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)

Please help me. I dont understand why this is not working in any way.

Answer 1

You need to tell rails to execute the post of the form via JavaScript. In the log you can see the PagesController is rendering HTML and not JS

Processing by ProjectsController#upload as HTML

Try adding :remote => true to your form_for helper

<%= 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 %>

See the rails guides http://guides.rubyonrails.org/working_with_javascript_in_rails.html#form-for for more information.

Answer 2

It appears that you are attempting to upload files with an AJAX request, requiring the :multipart => true and :remote => true for your form definition.

File uploads can't be done using remote, however this issue is easily resolved by making use of Remotipart gem - it enables AJAX file uploads without any further changes to your code.

1. Add gem 'remotipart' to your Gemfile
2. Add //= require jquery.remotipart to application.js (after jquery_ujs)
3. Use remote: true and multipart: true in your form declaration

You should now be able to asynchronously upload files.

For further information check out https://github.com/JangoSteve/remotipart