Ajax in rails, still redirecting to new page

Question

I have the following code in ruby 1.9 rails 3.2. I've followed a few different webpages to try to update a sub-field within a page. For some reason it's still redirecting to a new page, but it's not using the layout to render ... which is strange.

Routes:

match 'search' => 'content#search'

View:

<%= form_tag({:action => 'search'},:id => 'searchForm',:remote => true, :update => "ajaxstuffhere", :position => :bottom) do %>
 <p>
                     <label id="parkname">Park Name:</label><br/> 
                     <%= text_field :search, :parkname, :size => 25 %>
                  </p>
                  <p>
                     <label id="stateprovince">State / Province:</label><br/>
                     <% tstate = State.new %>
                     <% tstate.name = "Select a State / Province" %>
                     <% @states = [] %>
                     <% @states << tstate %>
                     <% states = State.all.sort{|x,y| [x.country_id, x.name] <=> [y.country_id, y.name] } %>
                     <% states.each do |state| %>
                        <% @states << state %>
                     <% end %>
                     <%= puts "statelist is : " + @states.inspect.to_s %> 
                     <%= collection_select(:search, :state, @states, :id, :name) %>
                  </p>
                  <p>
                     <label id="zipcode">Zip Code:</label><br/> 
                     <%= text_field :search, :zipcode, :size => 5 %>

                  </p>
                  <p>
                     <label id="distanceSearchLabel">Max Distance:</label><br/>

                    <select id="distancePick" name="search[distance]">
                      <option value="">Select Distance</option>
                      <option value="10">10km</option>
                      <option value="50">50km</option>
                      <option value="100">100km</option>
                      <option value="250">250km</option>
                      <option value="500">500km</option>
                      <option value="1000">1000km</option>
                    </select>
                  </p>
                  </p>
                  <p>
                    <%= submit_tag 'Search' %>
                  </p>

               <div style="clear:both;">

                </div>


            <h2>Narrow your Search</h2>


            <a href="JavaScript:amenitiesPopup()">By Amenities</a>
            <br />

            <p>
               <label id="parkname">Price:</label><br/> 
               <%= text_field :search, :pricelow, :size => 5 %>
               <%= text_field :search, :pricehigh, :size => 5 %>
            </p>
            <p>
               <label id="parkname">Age:</label><br/> 
               <%= text_field :search, :age, :size => 5 %>
            </p>
            <p>

            <%= check_box :search,:pets_allowed %><label id="petsallowedcb">Allows Pets</label><br/> 
            </p>

            <%= check_box :search,:big_rigs %><label id="bigrigcb">Allows Big Rigs</label><br/> 

            <p>
            <%= submit_tag 'Search' %>
          </p>
          <% end %>

Controller:

def search
    ...
   render :partial => 'search'
end #seach def

I have an empty div within the html page with ID "ajaxstuffhere". When I click the submit button on the form, it loads the _search.html.erb in a new page instead of in the specified div.

Thanks for the help!

Edit: Here is the post request from the server :

Started POST "/search" for 70.28.21.25 at 2013-09-25 13:22:54 +0000
Processing by ContentController#search as HTML
  Parameters: {"utf8"=>"â", "search"=>{"parkname"=>"as", "state"=>"", "zipcode"=>"", "distance"=>"", "pricelow"=>"", "pricehigh"=>"", "age"=>"", "pets_allowed"=>"0", "big_rigs"=>"0"}}
Rendered content/_search.html.erb (424.3ms)
Completed 200 OK in 637ms (Views: 105.6ms | ActiveRecord: 478.6ms)

Also, the HTML rendering of the form:

<form accept-charset="UTF-8" action="/search" data-remote="true" id="searchForm" method="post" position="bottom" update="ajaxstuffhere"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

                  <p>
                     <label id="parkname">Park Name:</label><br/> 
                     <input id="search_parkname" name="search[parkname]" size="25" type="text" />
                  </p>
...
<input name="commit" type="submit" value="Search" />
</form>

Edit: 1 week later and still not functional

I have a new homepage.js.erb file with the following:

("#ajaxstuffhere").hide();

Which allegedly is supposed to be returned and executed when data-remote="true" is set on the form. Note that I switched to the homepage controller until I can get an ajax response working.....

Well ... that didn't work so I tried a coffee script alternative:

<script>
$(document).ready ->
  $("#ajaxstuffhere").on("ajax:success", (e, data, status, xhr) ->
    $("#ajaxstuffhere").append "<p>RESPONSE</p>" //xhr.responseText
  ).bind "ajax:error", (e, xhr, status, error) ->
    $("#ajaxstuffhere").append "<p>ERROR</p>"
</script>

I dropped this right in the body of the html.erb file. It should get executed when the page loads, I would think?

At any rate, if the data-remote="true" tag did the ajax request, the response should just add "response" to the ajaxstuffhere field ... except this is not the case. The page still reloads and the AJAX response is probably lost

Answer 1

Is your submit button in the right place? This would be easier with a code snippet of the view with the form.

Answer 2

It turns out I have a line :

<%= render :partial => '/inc/analytics' %>

For Google Analytics, inside of the layout. During a post request, the line forced the page to navigate to a new page.

I have no idea why this is the case, perhaps google has some kind of actionlistener that overrides the one that rails puts on for remote forms.

Any more information related to this is welcome