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 に答える