フォーム送信エラーの後にAJAXベースの要素を表示する

ajax drop-down-menu jquery ruby-on-rails
フォーム送信エラーの後にAJAXベースの要素を表示する

フォームには、カテゴリとサブカテゴリの2つの選択要素があります。 最初は、選択されたカテゴリのみが表示されます。 ユーザーがカテゴリ選択で選択を行うと、AJAXリクエストがサーバーに送信され、サブカテゴリ選択が表示されます。 それはうまくいきます。

今、フォーム送信に何らかのエラーがあり、必要な値が欠落している、または何かが原因でエラーメッセージが表示されますが、選択ボックスの同じ状態を保持できず、カテゴリ選択のみが表示されます、値が選択されていない状態、つまり初期状態。 これらの選択された要素の状態をどのように保存できるかを誰かが私に提案できますか?

新しいフォームのコードスニペットを次に示します。

    category <%= collection_select :post_category, :id, @categories, :id, :name,
                                                options = {:prompt => "Select a category"} %>

カテゴリ選択で選択が行われたときにAJAXリクエストを送信するjQueryスクリプトを次に示します。

$("#post_category_id").change(function() {
  var category_id = $('select#post_category_id :selected').val();
  if(category_id == "") category_id="0";
    $.get('/posts/update_sub_cat/' + category_id, function(data){
       $("#sub-category-select").html(data);
    })
  return false;
});

AJAXリクエストは、以下に示すpost_controllerの* update_sub_cat *アクションで行われます。

def update_sub_cat
  if params[:id].present?
    @sub_categories = Category.find_all_by_parent_id(params[:id])
  else
    @sub_categories = []
  end
  respond_to do |format|
    format.js
  end

end

AJAXリクエストは* update_sub_cat.js.erb *ファイルをレンダリングします。このファイルでは、いくつかのHMTLを使用しました

sub-category <%= collection_select :post_sub_category, :id, @sub_categories, :id, :name,
                                        options = {:prompt => "Select a sub-category"} %>

ここではHTMLを直接使用するのではなく、$( ‘sub-category-select).append(…​)を使用する必要がありますが、このように機能するようになり、後で変更する予定です。

これが私のプログラムのこの部分に関係するすべてのコードです。

誰かが私を助けてもらえますか?

  1  0


ベストアンサー

私は問題を解決し、状態を維持するためにAJAXベースの要素を得ました。 これが私のjQueryコードです。

$('#before_category_select').loadPage();

jQuery.fn.loadPage = function(){
if($("#new-post-area").length > 0){
    $.getJSON('/home/cat_select_state.json', function(data){
        $.get('/posts/update_sub_cat/' + data.cat_state, function(data1){
           $("#sub-category-select").html(data1);
        })
    });
   }
}

select要素の状態を取得するために呼び出すコントローラーアクションは、ページ送信時にセッション変数として保存されます。

  def cat_select_state
    @cat_session = {:cat_state => session[:new_post_category], :sub_cat_state => session[:new_post_sub_category]}
    respond_to do |format|
      format.json {render :json => @cat_session}
    end
  end

そして最後に、セッション変数として保存される選択ボックスにデフォルト値を使用しました。 セッション変数がヌルの場合、デフォルト値は選択ボックスのプロンプトメッセージです。

<%= collection_select :post_category, :id, @categories, :id, :name,
                                                options = {:prompt => "Select a category", :selected => session[:new_post_category]} %>

サブカテゴリのselect要素のHTMLは、javascriptファイルupdate_sub_cat.js.erbでレンダリングされます。

sub-category <%= collection_select :post_sub_category, :id, @sub_categories, :id, :name,
                                        options = {:prompt => "Select a sub-category"} %>

さらに改善があれば提案してください。

2


タイトルとURLをコピーしました