在Bootstrap Ajax模式中使用simple_form显示内联错误
我在这里和这里找到了类似的StackOverflow问题，但仍然无法使其工作。
我正在使用Rails 3.2.8，SimpleForm 2.0.4和Twitter Bootstrap 2.1.1（通过bootstrap-sass gem 2.1.1.0）。
用户应该能够从模态弹出窗口添加联系人。 如果存在validation错误，它们应该显示为内联，就像用户使用表单的非模态版本（字段周围的红色边框，字段旁边的错误消息）一样。
我像这样加载模态：
Go modal! 这是Bootstrap模式，它调用非模态版本中部分使用的相同contacts/contact_fields 。 app / views / contacts / _new_modal.html.erb ：
app / controllers / contacts_controller.rb （故意注释掉format.json行，因为我试图用JavaScript发回整个模态）：
def create @contact = Contact.new(params[:contact]) respond_to do |format| if @contact.save format.html { flash[:success] = "Contact added." redirect_to @contact } format.json { render json: @contact, status: :created, location: @contact} else format.html { render action: "new" } #format.json { render json: @contact.errors, status: :unprocessable_entity } format.js { render 'new_modal_error' } end
应用程序/视图/联系人/ new_modal_error.js.erb
var modal = " 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>"; $("#new-contact-modal").html($(modal));
app / assets / javascripts / contacts.js一些JQuery重置表单并关闭成功模式。
$(function($) { $("#new_contact") .bind("ajax:success", function(event, data, status, xhr) { // http://simple.procoding.net/2008/11/22/how-to-reset-form-with-jquery : $(this).each(function(){ this.reset(); }); $("#new-contact-modal").modal("hide"); }) });
好消息是，当表单没有错误时，这种方法有效：添加联系人并隐藏模态。 但是，如果存在validation错误， 则会收到消息“JSON.parse：unexpected character”。 这来自jquery.js，第515行，这是此代码段中的return语句：
// Attempt to parse using the native JSON parser first if ( window.JSON && window.JSON.parse ) { return window.JSON.parse( data ); }
如果我检查data ，我看到的是我的new_modal_error.js文件的内容，完全展开了表单错误，并为JavaScript进行了转义。 但它不是JSON。
我错过了什么？ 如何让页面将new_modal_error.js作为JavaScript文件处理，而不是JSON变量？ 或者是否有更简单的方法来处理这个问题？
这里的主要问题是使用data-type => :json调用表单。 这意味着它会期待JSON响应，但我希望它能够传回JavaScript。 解决方案是设置data-type => :script （或者让它关闭并让Rails推断JavaScript）：
:html => {:class => "form-horizontal", "data-type" => :script }) do |contact_form| %>
感谢本文解释各种数据类型，并澄清数据类型是指响应 ，而不是数据提交：
Rails 3远程链接和表单第2部分：数据类型（使用jQuery）
“jQuery的.ajax()方法提供了一个名为dataType的可选参数，用于指定响应所需的数据类型。”
我认为@wanghq指出的另一个问题是JQuery的.html()方法更新了对象的innerHTML 。 我最终创建了一个仅包含表单的部分，在
包装器中调用partial，然后以包装器为目标替换表单：
var myForm = "<%= escape_javascript(render :partial => 'contacts/new_modal_form', :locals => { :contact => @contact.errors }) %>"; $("#new-contact-form-wrapper").html(myForm);
我仍在努力让变量通过，表单成功清除等等。由于我使用的是控制器的一部分，我可能只是继续把所有的JQuery（成功和失败）放在那里所以我不需要app / assets / javascripts / contacts.js 。
我不明白为什么你需要重置表格。 我认为没有必要。
$(function($) { $("#new_contact") .bind("ajax:success", function(event, data, status, xhr) { ... }) });
你需要解决的一件事是你的new_model_error.js.erb下面的行，否则你将有重复的div， id =“new-contact-modal” 。
old: $("#new-contact-modal").html($(modal)); new: $("#new-contact-modal").html($(modal).html());
如果你还有问题，请告诉我。