form_tag with：remote =＆gt; true不更新​​div，跳转到单独的页面

Question

我正在尝试根据表单提交更新div。我在Rails 3.1.1上。我正在尝试改编别人的recipe。我在main.html.erb中的代码是这样的：

<%= javascript_include_tag :defaults %>
<div id='seq_search'>
  <%= form_tag(:remote => true, :update => 'seq_select', :action => 'select')  do %>
    <p>
      <%= search_field_tag  :query, '', :size => 45 %>
    </p>
    <p>
      <%=submit_tag "Submit", :disable_wth => "Adding ..."%>
    </p>
   <% end %>
</div>

<div id='seq_select'>

</div>

控制器看起来像

class SearchAjaxController < ApplicationController
  def main
  end
  def select
      render :text => '<li> '+params[:query] + ' </li>'
  end
end

然而，当我在文本框中输入内容并按提交时，而不是更新div，它会转到另一个页面，只呈现控制器的select方法的输出。

如果我查看表单的页面源代码，它就是这样的：

<div id='seq_search'>
  <form accept-charset="UTF-8" action="/search_ajax/select?remote=true&amp;update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
    <p>
      <input id="query" name="query" size="45" type="search" value="" />
    </p>
    <p>
      <input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
    </p>
</form></div>

<div id='seq_select'>

</div>

似乎表单只是将remote=true&update=seq_select作为参数传递给控制器​​的方法/函数。这是应该发生的事情吗？

更新

所以我尝试添加以跟随Mike Campbell的建议并将以下代码添加到我的视图（`.html.erb'）文件

<SCRIPT type='text/Javascript'> 
$(function(){
  $('#form-id').bind('ajax:success', function(xhr, data, status){
    $('#seq_select').html(data);
  });
}
</SCRIPT>

并且还给表单提供了一个id：

 <%= form_tag(:remote => true, :update => 'seq_select', :action => 'select', :id => 'form-id')  do %>

提交表单仍然不会更新页面。它像以前一样简单地跳到新的渲染视图。生成的HTML读取：

<SCRIPT type='text/Javascript'> 
$(function(){
  $('#form-id').bind('ajax:success', function(xhr, data, status){
    $('#seq_select').html(data);
  });
}
</SCRIPT>

<div id='seq_search'>
  <form accept-charset="UTF-8" action="/ajax_search/select/form-id?remote=true&amp;update=seq_select" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="wlOm4H7GvZAQoIVpjxPLqHAQLOIpJ4V5r0WYEpvCCrQ=" /></div>
    <p>
      <label> Search by identifiers, accessions, and gene names.. </label>
    </p>
    <p>
      <input id="query" name="query" size="45" type="search" value="" />
    </p>
    <p>
      <input disable_wth="Adding ..." name="commit" type="submit" value="Submit" />
    </p>
</form></div>

<div id='seq_select'>

</div>

更新

似乎form_tag的语法错误，第一个参数必须是操作的名称。我现在<%= form_tag( 'select', :remote => true, :id => 'form_id') do %>生成关联的HTML <form accept-charset="UTF-8" action="select" data-remote="true" id="form_id" method="post">。哪个更好，但我的Ajax仍无法正常工作。

Answer 1

我认为这与在控制器中响应xhr有关。你应该指定这是一个xhr请求。 有关该问题，请参阅here。