Show ajax based items after form submission error

Question

I have two select elements in my form, Category and Subcategory. At first, only the category selection is displayed. When the user makes a selection in the select category, an AJAX request is sent to the server and the subcategory selection is displayed. It works great.

Now, when there is some kind of error in the submit form, because of something, some value that is required or something is missing, I am showing an error message, but I cannot save the same state in blocks of choice, I see only the choice of category, without the value selected, i.e. initial state. Can someone suggest me how I can save the state of these selection items?

Here is a snippet of code from my new form:

<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> 

Here is my jQuery script that sends an AJAX request when the choice is made by choosing a category:

 $("#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; }); 

An AJAX request is executed in the update_sub_cat action in post_controller, which is shown below:

 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 request displays update_sub_cat.js.erb file in which I used some HMTL

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

I know that I should not directly use HTML here, but rather use $ ('sub-category-select) .append (...), but I got it like this and plan to change it later.

This is all the code that is involved in this part of my program.

Can someone help me please?

Answer 1

I solved the problem and got an AJAX based element to maintain state. Here is my jQuery code:

 $('#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); }) }); } } 

The action of the controller that I call to get the state of the selection items, which is stored as session variables during page submission:

  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 

And finally, I used the default values ​​for the selection fields, which are stored as session variables. If the session variable is zero, the default is the prompt for the selection window.

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

The HTML for the subcategory selection item is displayed in the javascript update_sub_cat.js.erb file.

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

Please suggest if you have additional improvements.