Question

I am using Rails 3.0.3 with jQuery ujs.

I want to send a form remotely. The view template mains/index.html.erb containing the form looks as follows:

...
<%= form_tag :remote => true, :controller => "mains", :action => "search", :format => :js do %>
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
 <%= label_tag(:location_start, "Location Start:") %>
</td>
<td valign="top">
<%= text_field_tag(:location_start) %>
</td>
...
</tbody>
</table>
</div>
<div class="buttons">
<span class="button"><%= submit_tag("Search") %></span>
</div>
<% end %>
...

The controller mains_controller.rb looks as follows (removed unnecessary stuff):

class MainsController < ApplicationController

def index
  respond_to do |format|
    format.html # index.html.erb
  end
end

def search
  respond_to do |format|
    format.js { render :template => 'mains/search.js.erb'}
  end
end

end

The view template mains/search.js.erb has the following content:

$('#search').html("<h1>Headline</h1>");

I am using search.js.erb instead of search.js.rjs due to instructions in chapter “26.4 Write Less and Do More with JQuery” in Agile Web Development with Rails (4h edition). I also added :format => :js due to https://github.com/rails/jquery-ujs/issues/closed/#issue/52.

When I call http://0.0.0.0:3000/mains/index and submit the form, it’s actually not submitted remotely, but the browser loads http://0.0.0.0:3000/mains/search.js?remote=true instead. The browser outputs $('#search').html("<h1>Headline</h1>");, instead of executing the JavaScript by replacing div#search with <h1>Headline</h1> given.

I tried to find a solution but wasen’t successful so far… Could anyone help?

Answer 1

Solved the problem by replacing <%= form_tag :remote => true, :controller => "mains", :action => "search", :format => :js do %> with <%= form_tag( {:controller => "mains", :action => "search"}, :remote => true ) do %> and updating to the newest version of jQuery ujs…