[英]Rails: Keep JSON form fields populated if the form returns a validation error
我有一個創建產品的 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.