Блог

У меня есть простая форма rails, которая создает продукт, и у меня есть следующие три поля внутри формы, чтобы связать продукт с соответствующими категориями:

  <div class="form-group">
   <%= f.input :child_category_id, :collection => @categories.order(:name), :label_method => :name, :value_method => :id, label: "Category", :include_blank => "--Select Category--", input_html: { id: "first_dropdown" } %>
 </div>

 <div class="show_hide">
   <%= f.input :subcategory_id, :collection => [] || @subcategory.order(:name), :label_method => :name, :value_method => :id, label: false, :include_blank => "--Select Category--", input_html: { id: "second_dropdown" } %>
 </div>

 <div class="show_hide_third">
   <%= f.input :child_subcategory_id, :collection => [] || @child_subcategory.order(:name), :label_method => :name, :value_method => :id, label: false, input_html: { id: "third_dropdown" } %>
 </div>
  

Это маршрут:

 resources :products, :path => "products/select_item", only: [:select_item] do
  get :select_item, on: :collection
end
  

Это метод внутри контроллера, который у меня есть:

 def select_item
  if params[:child_category_id].present?
    @subcategory = Subcategory.where(child_category_id: params[:child_category_id])
    render :json => @subcategory.order(:name)
  end
  if params[:subcategory_id].present?
    @child_subcategory = ChildSubcategory.where(subcategory_id: params[:subcategory_id])
    render :json => @child_subcategory.order(:name)
    end
end
  

Это новый продукт и методы создания продукта, которые у меня есть внутри контроллера:

 def new; end

def create
  @product = Product.new(product_params)
    respond_to do |format|
      if @product.save
        format.html { redirect_to root_path }
        format.json { render :new, status: :created, location: @product }
        flash[:success] = "Product was successfully added."
      else
        format.html { render :new }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
end 
  

Это Javascript, который я использую для заполнения второго и третьего полей в соответствии с выбранным значением:

     $('#first_dropdown').on('change', function() {
        $.ajax({
            url: '/products/select_item/select_item?child_category_id='   $(this).val(),
            dataType: 'json',
            success: function(data) {
                let childElement = $('#second_dropdown');
                if( data.length === 0 ) {
                    $('.show_hide').hide();
                    $('.show_hide_third').hide();
                } else {
                    $('.show_hide').show();
                }
                childElement.html('');
                data.forEach(function(v) {
                    let id = v.id;
                    let name = v.name;
                    childElement.append('<option value="'   id   '">'   name   '</option>');
                });
            }
        });
    });

    $('#second_dropdown').on('change', function() {
        $.ajax({
            url: '/products/select_item/select_item?subcategory_id='   $(this).val(),
            dataType: 'json',
            success: function(data) {
                let childElement = $('#third_dropdown');
                if( data.length === 0 ) {
                    $('.show_hide').hide();
                    $('.show_hide_third').hide();
                } else {
                    $('.show_hide').show();
                    $('.show_hide_third').show();
                }
                childElement.html('');
                data.forEach(function(v) {
                    let id = v.id;
                    let name = v.name;
                    childElement.append('<option value="'   id   '">'   name   '</option>');
                });
            }
        });
    });
  

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

Проблема заключается в том, что в момент загрузки страницы в раскрывающемся списке нет вариантов для выбора; поэтому форма не может выбрать правильное значение. Вам нужно обновить свой контроллер следующим образом:

 def create
  @product = Product.new(product_params)
    respond_to do |format|
      if @product.save
        format.html { redirect_to root_path }
        format.json { render :new, status: :created, location: @product }
        flash[:success] = "Product was successfully added."
      else
        @categories = Category.all.order(:name)
        @subcategory = Subcategory.where(child_category_id: @product.child_category_id).order(:name)
        @child_subcategory = ChildSubcategory.where(subcategory_id: @product.subcategory_id).order(:name)
        format.html { render :new }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
end