0

高度な検索フォームが送信後もフォーム フィールドの値を保持するようにしたかったため、フォームを method=POST から ajax に変更しました。私のコントローラーはまだうまく機能しており、残りの呼び出しを行い、結果としてデータを取得できます。

問題は、ajax を使用してページを再度レンダリングする方法がわからないことです。応答ロジックはadvanced_search_order_tableに組み込まれているため、ajaxが応答に関係することは望ましくありません。advanced_search_orders_table をリロードするために Ajax が必要なだけです。

<%= render "advanced_search_orders_form" %>
<div id="advanced_search_orders_table" class="fk-table ajax">
  <%= render "advanced_search_orders_table" %>
</div>

advanced_search_orders_form.html.erb 内 (部分的なスニペットのみ)

form id="advancedSearchOrder" name="advancedSearchForm" value="advancedSearch" class=" search line" action="" onsubmit="return submitForm();">

<div class="advancedSearchFormField">
      <span class="advancedSearchFormlabel">Order Id</span>
      <%= text_area_tag('filters[order_id]',filter_params['order_id'],:rows=>10) %>
</div>

<div class="advancedSearchFormSelectField">
  <span class="advancedSearchFormlabel"> Order Sales Channel </span>

  <%= select_tag 'filters[order_sales_channel]',
                  options_for_select(
                          [["Web", "Web"], ["Phone", "Phone"]]
                  ),
                  selected: filter_params['order_sales_channel'],
                  multiple: true,
                  class: "advancedSearchFormSelectBox" %>
</div>

<input type="submit" class="advanced-search-btn" id="advancedSearchButton" name="advancedSearchButton" value="Search"/>

そして、submitFormを次のように定義しました

function submitForm() {
    $.ajax({type:'POST',url: '', data:$('#advancedSearchOrder').serialize(), success: function(response) {
        /*Render advanced_search_orders_table here */
    }});

    return false;
}
4

1 に答える 1

0

JavaScript を使用して応答を解析するだけです。基本的にテーブルから行を削除し、結果ごとに行を追加します。素敵なアニメーションを追加することもできます ;)

もう 1 つのオプションは、データを含む既にレンダリングされた HTML ページでその AJAX 呼び出しに応答し、単にテーブルを新しいものに置き換えることです (再び JavaScript を使用します)。どちらがより優れたパフォーマンスを発揮するかはわかりません。

于 2013-03-24T15:11:35.613 に答える