Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
995 views
in Technique[技术] by (71.8m points)

ruby on rails - Show ajax based elements after form submit error

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

Now, when there is some error in the form submit, due to anything, missing some value that is required, or anything, I show the error message, but I cannot retain the same state of the select boxes, I see only the category select, with no value selected, i.e the initial state. Can anyone suggest me how I can preserve the state of these select elements?

Here's a code snippet 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's my jQuery script that sends AJAX request when a selection is made on Category select:

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

The AJAX request is made on the update_sub_cat action in the 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

The AJAX request renders update_sub_cat.js.erb file, in which I have used some HMTL

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

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

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

Can anyone help me, please?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I solved the problem, and got the AJAX based element to maintain state. Here's 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 controller action that I call to get the state of the select elements, which is stored as session variables at the time of page submit:

  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 a default values for the select boxes, which are stored as session variables. If the session variable is null, the default value is the prompt message for the select box.

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

The HTML for sub-category select element is rendered in the javascript file update_sub_cat.js.erb.

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

Please suggest if you have any more improvements.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...