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

我的表单中有两个select元素，Category和Sub-category。首先，只显示类别选择。当用户在类别选择中做出选择时，会向服务器发送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脚本发送时作出选择的类别选择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请求是由上update_sub_cat在post_controller中的操作，如下所示：

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（...），但我知道它是这样工作的，我计划稍后再改变它。

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

任何人都可以帮助我吗？

来源

2011-08-09 rookieRailer

你将不得不提供更多细节。为什么你不能保持选择框的状态？你如何显示错误？等等...我们是一个编程社区，向我们展示代码，以便我们可以提供帮助，否则我们无法做到。 – iwasrobbed

对不起，我认为这会有一些一般的伎俩，这就是为什么我没有提供细节，我现在详细说明了我的问题，请看看。谢谢。 – rookieRailer

感谢您对标签的修改。只显示我在stackoverflow使用的经验不足:) – rookieRailer

我解决了这个问题，并得到了基于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); 
     }) 
    }); 
    } 
}

控制器的行动，我打电话让选择元素的状态，这是在页面的时间存储为会话变量提交：

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

最后，我为选择框使用了一个默认值，它们被存储为会话变量。如果会话变量为空，则默认值是选择框的提示消息。

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

请建议您是否有任何改进。

来源

2011-08-10 18:51:04 rookieRailer

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

回答

相关问题