Rails remote form sends html instead of js

Question

I have a remote form_for in my Rails 4 app that is not requesting a JavaScript response. I am getting an UnknownFormat error when I click submit on the form. It is saying the parameters were:

{"utf8"=>"✓",
 "authenticity_token"=>"eAzS1lELwDL9Qt+fM2hAPlPmCxCgFPuAvl1QYWOIL3IBPdrnxn0woYYC+5uzGjyqH3lQxGxWGrYq/fnMrFNfnw==",
 "artist"=>{"name"=>"Joe"},
 "commit"=>"Save Artist"}

My form code is:

= form_for(@artist, remote: true, authenticity_token: true) do |f|
  - if @artist.errors.any?
    #error_explanation
      %h2= "#{pluralize(@artist.errors.count, "error")} prohibited this artist from being saved:"
      %ul
        - @artist.errors.full_messages.each do |msg|
          %li= msg

  .field
    = f.label :name
    = f.text_field :name
  .actions
    = f.submit 'Save Artist'

I have a create.js.erb file, and my create method in my ArtistsController looks like:

  def new
    @artist = Artist.new

    respond_to do |format|
      format.js
    end
  end

  def create
    @artist = Artist.new(artist_params)

    if @artist.save
      respond_to do |format|
        format.js
      end
    end
  end

My shows form is:

= form_for @show, html: {role: 'form'} do |f|
  - if @show.errors.any?
    #error_explanation
      %h2= "#{pluralize(@show.errors.count, "error")} prohibited this venue from being saved:"
      %ul
        - @show.errors.full_messages.each do |msg|
          %li= msg

  .row
    = f.label :venue_id
    = f.collection_select :venue_id, Venue.all, :id, :name, class: 'form-control'
  .row
    .col-sm-6
      = link_to 'New Artist', new_artist_path, id: :new_artist_link, remote: true
  .row.row-centered
    .col-sm-6
      .form-group
        = f.label :date
        = f.date_select :show_date, order: [:day, :month, :year], class: 'form-control'
    .col-sm-6
      .form-group
        = f.label :doors_open
        = f.time_select :doors_open, class: 'form-control'
  .row.row-centered
    .col-sm-6
      .form-group
        = f.label :dinner_starts
        = f.time_select :dinner_starts, class: 'form-control'
    .col-sm-6
      .form-group
        = f.label :show_starts
        = f.time_select :show_starts, class: 'form-control'
  .row.row-centered
    .col-sm-6
      .form-group
        = f.label :dinner_ends
        = f.time_select :dinner_ends, class: 'form-control'
    .col-sm-6
      .form-group
        = f.label :show_ends
        = f.time_select :show_ends, class: 'form-control'

  .form-group
    = f.submit 'Save Show', class: 'btn btn-default'

My new.js.erb file in my artists view is:

$('#new_artist_link').hide().after("<%= j render 'form' %>");

And my create.js.erb that is in my artists view is:

$('#new_artist').remove();

Console output:

tarted GET "/artists/new" for 127.0.0.1 at 2015-02-26 22:46:12 -0600
Processing by ArtistsController#new as JS
  Rendered artists/_form.html.haml (2.7ms)
  Rendered artists/new.js.erb (4.2ms)
Completed 200 OK in 15ms (Views: 8.8ms | ActiveRecord: 0.2ms)


Started POST "/artists" for 127.0.0.1 at 2015-02-26 22:46:16 -0600
Processing by ArtistsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"0dhmOLTBguCAn4gdaIE0D0PyokHp4RLLZ8DDeqiA21Wo6W4JI7dyc/vfrBno80ibD235lSWj8/3zYGrXZ1uruA==", "artist"=>{"name"=>"fsa"}, "commit"=>"Save Artist"}
   (0.1ms)  begin transaction
  SQL (0.2ms)  INSERT INTO "artists" ("name", "created_at", "updated_at") VALUES (?, ?, ?)  [["name", "fsa"], ["created_at", "2015-02-27 04:46:16.795869"], ["updated_at", "2015-02-27 04:46:16.795869"]]
   (209.8ms)  commit transaction
Completed 406 Not Acceptable in 213ms

ActionController::UnknownFormat (ActionController::UnknownFormat):
  app/controllers/artists_controller.rb:20:in `create'


  Rendered /home/ryan/.rvm/gems/ruby-2.2.0@DoseyDoe/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_source.erb (5.1ms)
  Rendered /home/ryan/.rvm/gems/ruby-2.2.0@DoseyDoe/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_trace.html.erb (3.0ms)
  Rendered /home/ryan/.rvm/gems/ruby-2.2.0@DoseyDoe/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_request_and_response.html.erb (0.9ms)
  Rendered /home/ryan/.rvm/gems/ruby-2.2.0@DoseyDoe/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/_web_console.html.erb (0.8ms)
  Rendered /home/ryan/.rvm/gems/ruby-2.2.0@DoseyDoe/gems/web-console-2.0.0/lib/action_dispatch/templates/rescues/diagnostics.html.erb within rescues/layout (26.7ms)

EDIT: I don't know if it makes a difference or not, but the remote form is in the form for another model.

EDIT 2: Fixed create method - still no dice. Added the form template that I am using that links to creating the artist.

EDIT 3: Added console output

EDIT 4: Added create.js.erb

Your create method does not actually create the record. It only initializes. Fix it and see if it works. You need a @artist.save or change Artist.new to Artist.create — Mingsheng
– Mingsheng, Commented Feb 27, 2015 at 3:41
@Mingsheng Still no dice. I updated the original post with the new code and added some more code - maybe that will help. — ThomYorkkke
– ThomYorkkke, Commented Feb 27, 2015 at 4:12
Web server console output please! That's the first place to look to find out what your app thinks you are asking for and what it's telling you. Also it helps to see the actual relevant chunk of the HTML from the generated page. — Beartech
– Beartech, Commented Feb 27, 2015 at 4:29
Can you check if the form is requesting javascript? that might be why your controller is confused since there's only format.js. It seems like you are requesting html here — Mingsheng
– Mingsheng, Commented Feb 27, 2015 at 4:40
@Mingsheng How do I check that? I was under the impression adding remote: true made it request JavaScript. — ThomYorkkke
– ThomYorkkke, Commented Feb 27, 2015 at 4:50

fkoessler · Accepted Answer · 2020-04-16 07:54:31Z

4

Try adding the format param to the form_for. You're requesting an html response by default and your controller doesn't know how to answer that. Requesting a js response should fix it.

= form_for(@artist, format: :js, authenticity_token: true) do |f|

edited Apr 16, 2020 at 7:54

fkoessler

7,30414 gold badges64 silver badges97 bronze badges

answered Feb 27, 2015 at 4:54

Dane O'Connor

77.9k41 gold badges122 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ThomYorkkke Over a year ago

Okay, that worked but now it is just displaying the JavaScript in my response. My create.js.erb file should remove the form that was used to create the new artist. All that happens is that it replaces everything that was on the page with the jQuery text that was in my create.js.erb file.

ThomYorkkke Over a year ago

Hmm, interesting. I thought that remote: true made it request a js response? What's the point of remote: true then?

Dane O'Connor Over a year ago

@ThomYorkkke it should, but that requires the rails javascript utilities to be loaded (and they might not be in this case). Make sure the jquery_ujs library (or today's equivalent) is included.

ThomYorkkke Over a year ago

I've made sure I have the jquery_ujs and jquery, but I'm still just getting text instead of having my jQuery running. I have other jQuery in the site that is running fine. Any suggestions?

Dane O'Connor Over a year ago

Is your create.js.erb file posted in the question? I don't see it.

|

mohnstrudel · Accepted Answer · 2019-11-10 23:22:39Z

1

Just encountered same error and after few hours of debugging found out, that rails ujs was required, but not loaded properly. If you're using webpack, make sure to start ujs. In my case I forgot the start(); option, i.e.

import Rails from '@rails/ujs'; 
Rails.start();

or

require("@rails/ujs").start();

if you prefer the require syntax.

answered Nov 10, 2019 at 23:22

mohnstrudel

6498 silver badges24 bronze badges

3 Comments

Fallenhero Over a year ago

I have the latter in my /app/javascript/packs/application.js but I still receive a html render in return. My call is type = xhr and initiated from rails-ujs. Any tipps?

mohnstrudel Over a year ago

You probably already tried setting format: :js in the form, right?

Fallenhero Over a year ago

Thanks for the reply. I found my problem. In rails 6 the layout will also applied to js-files, unless you name it layout.html.erb

Collectives™ on Stack Overflow

Rails remote form sends html instead of js

2 Answers 2

9 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related