0

私のビューには、検索フィルターを設定する Semantic_form_for があり、JavaScript を介してフィルターを追加するボタンを使用してフィルターを追加します。

 <%= semantic_form_for current_coach, :remote => true, :html => { :class => "custom-form rb-form", :id => "filter", :'data-url' => "#{roster_builder_coach_index_path}" } do |f| %>
  <div class="filter_parent_container">
    <% @search.conditions.each do |condition| %>
        <%= render "filter", :condition => condition %>
    <% end %>
  </div>

  <div class="bottom-info">
    <div class="count">
      <p class="num"><%= @athletes.count %></p>
      <p>identified with this filter set</p>
    </div>
    <input type="submit" class="send-request" id="search-button" value="" />
    <input type="button" class="add_filter" value="Add Another Filter" />
  </div>
  <div class="cl">&nbsp;</div>
<% end %>

ajax経由でフォームを送信する必要がありますが、そうではありません。コントローラーのパラメーターを確認していますが、次のとおりです。

{"action"=>"roster_builder", "controller"=>"coach"}

コントローラーは次のとおりです（ロガーはパラメーターをチェックしています）：

def roster_builder
authorize! :access_roster_builder, current_coach

logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info(params);
@search = Search.new(sport: current_coach.primary_sport, conditions: params[:search])
@athletes = @search.query.page(params[:page]).per_page(8)

render "athletes" if request.format.js?
end

Ajax 呼び出しは次のとおりです。

$("#filter").submit(function(){
  $.ajax({
    url: $("#filter").attr("data-url"),
    type: 'POST',
    success: function(data) {
      $(".results")[0].parentNode.removeChild($(".results")[0]);
    }
  });
});

:remote => true を使用する前は機能していましたが、フィルター全体 (JS 経由で追加されたものを含む) を永続化する必要があるため、ページを更新するのではなく、検索を実行するために Ajax が必要です。Ajax がフォーム データを送信しているのに、params が機能しないのはなぜですか? 次のように、シリアル化されたデータを Ajax 経由で送信しようとしましたが、役に立ちませんでした。

$.ajax({
  url: $("#filter").attr("data-url"),
  type: 'POST',
  data: $("form#filter").serialize(),
  success: function(data) {
    $(".results")[0].parentNode.removeChild($(".results")[0]);
  }
});

どんな助けでも大歓迎です！

4

1 に答える 1

2

  • remote: trueフォームの送信イベントでANDとajax呼び出しの両方を使用しないでください。

  • 自分でajaxを呼び出す場合は、必ず次のパラメータを渡す必要があります。data: $("form").serialize()

  • ajax呼び出しを使用して自分でデータを送信しているため、実際にはフォームを送信したくないため、送信イベントでfalseを返すか、e.preventDefault（）を実行する必要があります。

  • ajaxフォームを処理するこのプラグインは素晴らしいです：http：//www.malsup.com/jquery/form/

于 2013-03-14T16:24:04.473 に答える