Rails render js file but can't execute it

Asked by At

I have a problem with my Ruby (1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux]) on Rails (3.2.6) application: I need to execute a js file, but I can only print it.

View:

291             <%= form_for :change_top_ten, remote: true, url: {controller: :users, action: :change_top_ten, format: :js} do |f| %>
292                 <%= f.select :status, options_for_select(@categories_and_interests, selected: "tutti"), {class: :'deafult-select'}, onchange: "this.form.submit();" %>
293             <% end %>

Controller:

1658   def change_top_ten
1659     @filter = params[:change_top_ten][:status]
1660   end

change_top_ten.js.erb

  1 alert('here');

server log:

Started POST "/change_top_ten.js" for 10.0.2.2 at 2015-10-29 10:30:10 +0000
Processing by UsersController#change_top_ten as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"+v0oW+p0fy9IxpfbaKTj7g9yZSzffK+SQG52Mx3vjwQ=", "change_top_ten"=>{"status"=>"prof_2"}}
  User Load (56.4ms)  SELECT "users".* FROM "users" WHERE "users"."has_confirmed" = 't' AND "users"."id" = ? LIMIT 1  [["id", 13]]
  Rendered users/change_top_ten.js.erb (0.1ms)
Completed 200 OK in 154.7ms (Views: 34.9ms | ActiveRecord: 66.0ms)

The file is rendered as an html page: blank page with "alert('here');" printed on it.

EDIT: I'm editing the question to reply to the first comment:

application.js

  1 // This is a manifest file that'll be compiled into application.js, which will include all the files
  2 // listed below.
  3 //
  4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
  5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
  6 //
  7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
  8 // the compiled file.
  9 //
 10 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 11 // GO AFTER THE REQUIRES BELOW.
 12 //
 13 //# require angular
 14 //= require jquery
 15 //= require jquery_ujs
 16 //= require jquery.countdown
 17 //= require jquery.remotipart
 18 //# require_tree .

Jquery is imported because I have other calls like the one described here and thery are working fine

5 Answers

0
akbarbin On

You just put respond_to js in your method. Please try a code below:

def change_top_ten
  @filter = params[:change_top_ten][:status]
  respond_to do |format|
    format.js
  end
end

It will run your change_to_ten.js.erb file. I hope this help you.

0
Paul D On

Ok so you want to submit the form when the select is changed, which is a bit different to your original question.

You want to add some javascript to your application.js file which binds to the onChange event of the select control.

i.e. something like this:

$('select').onChange(function()
  {
    $('form').submit();
  }
);

That should submit any form on the page when any select is changed. You will probably want to scope the binding to a specific select and the submit to a specific form.

1
Paul D On

Ok so the response to your ajax query is not being evaluated as javascript. Try adding the following to your application.js file or somewhere where it will be executed before your form is rendered.

$.ajax({
    url: this.href,
    dataType: "script",
    beforeSend: function(xhr) {xhr.setRequestHeader("Accept", text/javascript");}
});

What this is doing is saying set the data type of all ajax calls as 'script' which should mean the response is evaluated as javascript.

0
ste On

I found a temporary solution. The problem was this code:

onchange: "this.form.submit();"

After deleting it an adding this code:

<%= f.submit :Save, class: :'btn', type: :submit %>

The js file is executed like it should.

How can I submit the form with the onchange method and have my js code executed?

0
Soh Cher Wei On

Make sure it has opening javascript tag, ex

<script type="text/javascript">
    enter code here
</script>