Показывать элементы на основе ajax после ошибки отправки формы

Question

У меня есть два выбранных элемента в моей форме, Категория и Подкатегория. Сначала отображается только выбор категории. Когда пользователь делает выбор в выборе категории, на сервер отправляется запрос AJAX, и отображается выбор подкатегории. Работает нормально.

Теперь, когда есть какая-то ошибка в отправке формы, из-за чего-либо, пропускает какое-то требуемое значение или что-то еще, я показываю сообщение об ошибке, но я не могу сохранить то же состояние полей выбора, я вижу только выбор категории, без выбранного значения, то есть начальное состояние. Кто-нибудь может подсказать мне, как я могу сохранить состояние этих избранных элементов?

Вот фрагмент кода из моей новой формы:

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

Вот мой jQuery-скрипт, который отправляет AJAX-запрос, когда выбор сделан на выбор категории:

$("#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 выполняется для действия update_sub_cat в post_controller, которое показано ниже:

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

конец

Запрос 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 (...), но я так и заработал, и планирую изменить его позже.

Это весь код этой части моей программы.

Кто-нибудь может мне помочь, пожалуйста?

Answer 1

Я решил проблему и получил элемент на основе 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]} %>

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"} %>

Пожалуйста, предложите, если у вас есть какие-либо улучшения.