1

我正在尝试根据表单提交更新 div。我在 Rails 3.1.1 上。我正在尝试改编别人的食谱。我在视图中的代码是这样的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&amp;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 仍然无法正常工作。

4

1 回答 1

0

我认为这与控制器中对 xhr 的响应有关。您应该指定这是一个 xhr 请求。有关此问题，请参见此处。

于 2012-08-02T15:12:00.470 回答