Ajax在rails中，仍然重定向到新頁面

Question

我在ruby 1.9 rails 3.2中有以下代碼。 我遵循了一些不同的網頁來嘗試更新頁面中的子字段。 由於某種原因，它仍重定向到新頁面，但未使用布局呈現...這很奇怪。

路線：

match 'search' => 'content#search'

視圖：

<%= 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 %>

控制器：

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

我在HTML頁面中有一個ID為“ ajaxstuffhere”的空div。 當我單擊表單上的提交按鈕時，它將_search.html.erb加載到新頁面中，而不是指定的div中。

謝謝您的幫助！

編輯：這是來自服務器的發布請求：

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)

另外，表單的HTML呈現：

<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>

編輯：1周后，仍然無法正常工作

我有一個新的homepage.js.erb文件，其中包含以下內容：

("#ajaxstuffhere").hide();

據稱應該在表單上設置data-remote="true"時返回並執行。 請注意，我切換到主頁控制器，直到我能收到ajax響應為止。

好吧...那沒用，所以我嘗試了一種咖啡腳本替代方法：

<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>

我將此權利放在了html.erb文件的主體中。 我認為應該在頁面加載時執行它嗎？

無論如何，如果data-remote =“ true”標記執行了ajax請求，則響應應僅在ajaxstuffhere字段中添加“ response” ...除非不是這種情況。 頁面仍然重新加載，並且AJAX響應可能丟失了

Answer 1

您的提交按鈕在正確的位置嗎？ 使用帶有表單的視圖的代碼片段會更容易。

Answer 2

原來我有一行：

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

對於Google Analytics（分析），在布局內。 在發布請求期間，該行強制頁面導航到新頁面。

我不知道為什么會這樣，也許谷歌有某種動作監聽器，它覆蓋了Rails為遠程表單提供的動作監聽器。

歡迎與此相關的更多信息