rails中的Ajax，仍然重定向到新页面答案

【问题标题】：Ajax in rails, still redirecting to new pagerails中的Ajax，仍然重定向到新页面
【发布时间】：2013-10-15 22:57:27
【问题描述】：

我在 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 请求，则响应应该只是将“response”添加到 ajaxstuffhere 字段......但情况并非如此。页面仍在重新加载，AJAX 响应可能丢失

【问题讨论】：

它正在通过html 格式提交表单。你有rails.js 安装吗？
根据我查看的网站，javascript来自包含页面布局中的 javascript_include_tag :default 。编辑：根据页面的来源，只加载了 assets/default.js
它会加载默认的 js 文件（如果存在），如果您的应用中没有这些文件，则不会加载它们。
现在它的加载原型、效果、拖放、控件。它似乎将它们编译成一个包含的大 javascript 文件。无论如何，它仍在新页面中加载
你还需要rails.js.. 见here

标签： ruby-on-rails ruby ajax

【解决方案1】：

您的提交按钮是否在正确的位置？使用表单视图的代码 sn-p 会更容易。

【讨论】：

【解决方案2】：

原来我有一条线：

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

对于 Google Analytics，布局内部。在发布请求期间，该行强制页面导航到新页面。

我不知道为什么会这样，也许 google 有某种 actionlistener 可以覆盖 rails 为远程表单设置的那个。

欢迎提供更多相关信息

【讨论】：