表格后显示基于AJAX的元素提交错误 [英] Show ajax based elements after form submit error

问题描述

我有我的形式，分类和子类别中的两个选择元素。起初，只有类别选择被示出。当用户在该类别的选择进行选择，一个AJAX请求被发送到服务器和子类别选择被示出。它工作正常。

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.

现在，当在表单中添加一些错误提交，因为什么，缺少所需的一些值，或者什么，我显示错误消息，但我无法挽留的选择框相同的状态，我只看到该类别中选择，没有任何价值选择，即初始状态。任何人都可以建议我怎么可以preserve这些选择元素的状态？

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?

下面是我的新形式的code片断：

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>

下面是发送当一个选择是在分类AJAX请求我的jQuery脚本中进行选择：

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;
});

Ajax请求作出的 update_sub_cat 在post_controller，如下所示动作：

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

结束

Ajax请求呈现的 update_sub_cat.js.erb 文件，在我所使用的一些HMTL

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

我知道，我不应该直接使用HTML在这里，而是使用$（'子类选）.append（...），但我得到了它的工作就是这样，和我打算以后去改变它。

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.

这是所有参与这部分​​我的计划是，code。

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

谁能帮我，好吗？

推荐答案

我解决了这个问题，并得到了基于AJAX的元素，以保持状态。这是我的jQuery code：

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

的HTML子类别中选择元素呈现在JavaScript文件update_sub_cat.js.erb。

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.

这篇关于表格后显示基于AJAX的元素提交错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！