Ruby on Rails - Issues with AJAX (ActionController:UnknownFormat)

Question

I am a beginner with Ruby on Rails so I apologize if the issue is obvious. I am currently working on a project called Gradebook. On one page in Gradebook, I've been working on a feature where a user will be able to click "New Category", and a form will be rendered within a div that will allow the user to enter information about the category, and then the category will show on the screen once the changes are saved. All of this would occur using AJAX.

Here is my thought process:

1. I add a submit button to the view that will trigger the "new" action on the Category controller. I use remote: true so the page does not redirect to /category/new. I create a div towards the bottom of the form in which the category form will be rendered.

    ... <%= form_for :category, url: new_gradebook_category_path, remote: true do |f| %> <%= f.submit 'New Category' %> <% end %> ... <div id="category_form"></div> 

2. In the category controller, I create a new category and specify that I only want to produce a javascript response:

    def new @category = Category.new respond_to do |format| format.js end end 

3. I create "new.js.erb" in the category folder that will be responsible for rendering my category form within the div:

    $('#category_form').html("<%= j (render 'newcategory') %>"); 

4. I create _newcategory.html.erb that is the actual form:

    <%= form_for :category, url: gradebook_category_index_path, remote: true do |f| %> <p> <%= f.label :category_name, "Category Name"%><br> <%= f.text_field :category_name %> </p> <p> <%= f.label :category_description, "Category Description"%><br> <%= f.text_area :category_description %> </p> <p> <%= f.submit, "Create Category" %> </p> <% end %> 

My issue is, when the user clicks on the "New Category" button, nothing happens. I looked on the Javascript Console and noticed that "new.js.erb" is not being found:

When I go to open up this link in a new tab, I get ActionController:UnknownFormat:

Here is all the things that I have tried:

1. I tried changing:

     respond_to do |format| format.js end 

   to this:

     respond_to do |format| format.html format.js end 

   I have read that using "format.js" as the only response can produce this error. However this just gives me "missing template category/new". Although I shouldn't have to specify new.html.erb, because I want this to be an AJAX response and I would like it to stay on the same page.

2. I have tried deleting the tmp folder, but this did not work.

3. I checked to make sure the file exists using "File.exists?", they did exist.

4. I checked to make sure the server wasn't interpreting it as HTML, and according to my server output:

     Started POST "/gradebook/2/category/new" for 127.0.0.1 at 2014-10-16 16:43:02 -0700 Processing by ApplicationController#routing_error as JS Parameters: {"utf8"=>"✓", "commit"=>"New Category", "path"=>"gradebook/2/category/new"} Rendered public/404.html (0.1ms) Completed 404 Not Found in 12ms (Views: 11.3ms | ActiveRecord: 0.0ms) 

   It is being interpreted as Javascript file, however it does show "ApplicationController#routing_error", but I fail to understand where this routing error is occuring.

   5. I checked to make sure JQuery was enabled (as the JS file uses JQuery), and it is enabled.

At this point, I'm not really sure what the issue is. I feel like the issue is super obvious, but the rails server is acting like the javascript file does not even exist. Any help would be much appreciated. Thanks a lot.

Answer 1

yes, it's because if you have a look in your screenshots you will see that is action POST ( form_for automatically uses POST method), but rails handle requests with 'new' like GET. If you type rake routes or bundle exec rake routes you will find your action as GET. You can set directly in form to be action GET instead of POST:

form_for :category, url: new_gradebook_category_path, method: :get, remote: true do |f|

I hope it helped