CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3
Max Williams
Max Williams

Reputation: 32933

Remote form in rails 3 app is submitting as html

I've come to my first remote form in a new rails 3 app and i can't get it to submit remotely: it keeps submitting as html. I've done this ok in other rails 3 apps so am thinking it must just be something i've forgotten.

Here's my form in my html.erb file:

      <%= form_for Assignment.new, :remote => true do |f| %>
        <%= hidden_field_tag "assignment[task_id]", @task.id %>
        <%= hidden_field_tag "assignment[person_id]", person.id %>            
        <%= submit_tag "Add to task" %>
      <% end %>

And here's how it renders out on the page. I've included the javascript file links as i have a feeling the problem is something to do with the js not being set up properly.

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" /> 
    <script src="/javascripts/jquery.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/person.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/jquery-ui-1.8.11.custom.min.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/jquery_ujs.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/jquery.ui.datepicker.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/jquery.colorbox-min.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/jquery.tipTip.minified.js?1306857355" type="text/javascript"></script> 
    <script src="/javascripts/application.js?1306857355" type="text/javascript"></script> 

    <meta name="csrf-param" content="authenticity_token"/> 
    <meta name="csrf-token" content="ErI0bMA1E0JAXwvyVMistPsWc4fg2dG5tDPOgeur358="/> 
  </head> 

  <body class="tasks"> 

    <form accept-charset="UTF-8" action="/assignments" class="new_assignment" data-remote="true" id="new_assignment" method="post">
      <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" />
        <input name="authenticity_token" type="hidden" value="ErI0bMA1E0JAXwvyVMistPsWc4fg2dG5tDPOgeur358=" />
      </div> 
      <input id="assignment_task_id" name="assignment[task_id]" type="hidden" value="2" /> 
      <input id="assignment_person_id" name="assignment[person_id]" type="hidden" value="1" />            
      <input name="commit" type="submit" value="Add to task" /> 
    </form>      

  </body> 
</html>

It all looks like it's being set up properly. But, when i submit i get this through in my log: 

Started POST "/tasks/2" for 127.0.0.1 at 2011-06-08 15:56:42 +0100
  Processing by TasksController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"ErI0bMA1E0JAXwvyVMistPsWc4fg2dG5tDPOgeur358=", "assignment"=>{"task_id"=>"2", "person_id"=>"1"}, "commit"=>"Add to task", "id"=>"2"}

Like i was saying, i think i've just missed out something that i needed to do to hook this up properly. Here's my Gemfile as well in case that's relevant:

source 'http://rubygems.org'

gem "rake", "0.8.7"
gem 'rails', '3.0.7'
gem 'haml'
gem 'heroku'
gem "heroku_backup_task"
gem 'authlogic', '3.0.2'
gem 'rails3-generators'
gem 'txtlocal', :git => 'git://github.com/epigenesys/txtlocal.git'
gem 'chronic'
gem 'sqlite3-ruby', :require => 'sqlite3'
gem 'bcrypt-ruby'
gem 'taps' #for heroku db import/export
gem 'jquery-rails', '>= 1.0.3'
gem 'jrails'

group :development, :test do
  gem 'rspec'
  gem 'mocha'
  gem "rspec-rails", "~> 2.4"
  gem 'database_cleaner', '0.5.2'  
  gem 'capybara', :git => 'git://github.com/jnicklas/capybara.git'
  gem 'selenium-client'
  gem 'machinist'
  gem 'faker'
end

Can anyone see what's missing?
thanks, max

EDIT - dumb mistake on my part: the partial containing the remote form was being called from inside another non-remote form which was calling the same action. So the outer form was being triggered by the submit button, not the inner remote one. Doh. Thanks for reading.

Upvotes: 6

Views: 4144

Answers (2)

George Armhold
George Armhold

Reputation: 31064

I ran into this as well, though for different reasons. In my case it was due to my use of form_tag rather than form_for. The latter apparently adds the proper params to make the call go over Ajax.

Upvotes: 0

pixeltom
pixeltom

Reputation: 1797

I had the same problem which I solved by adding :format => :js to the path.

So it would look something like this:

<%= form_for :assignment, :url => assignments_path(:format => :js)

Upvotes: 7

Related Questions