表单提交错误后显示基于Ajax的元素

小编典典

表单提交错误后显示基于Ajax的元素

ajax

我的表单中有两个选择元素，类别和子类别。首先，仅显示类别选择。当用户在类别选择中进行选择时，AJAX请求将发送到服务器，并显示子类别选择。它工作正常。

现在，当表单提交中由于任何原因，缺少某些必需的值或任何原因而出现错误时，我将显示错误消息，但是我无法保留选择框的相同状态，我只会看到类别选择，未选择任何值，即初始状态。谁能建议我如何保留这些选择元素的状态？

这是我新表单中的代码段：

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

这是我的jQuery脚本，当对Category select进行选择时，它将发送AJAX请求：

$("#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请求是在post_controller中的 update_sub_cat 操作上提出的，如下所示：

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

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

我知道，我不应该在这里直接使用HTML，而应该使用$（’sub-category-
select）.append（…），但是我可以使它像这样工作，并计划在以后进行更改。

这是我程序的这一部分所涉及的所有代码。

有人可以帮我吗？

阅读 237

2020-07-26

共1个答案

小编典典

我解决了问题，并获得了基于AJAX的元素来维护状态。这是我的jQuery代码：

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

我为获取select元素的状态而调用的控制器操作，该操作在页面提交时存储为会话变量：

  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

最后，我为选择框使用了默认值，这些默认值存储为会话变量。如果会话变量为null，则默认值为选择框的提示消息。

<%= 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中。

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

请提出您是否还有其他改进建议。

2020-07-26