显示内嵌simple_form在引导阿贾克斯模式错误(Display inline errors w

我发现类似的StackOverflow问题这里和这里 ，但仍不能得到这个工作。

我使用Rails 3.2.8，2.0.4 SimpleForm和Twitter的引导2.1.1（通过引导，萨斯宝石2.1.1.0）。

用户应该能够添加从模式弹出窗口中的联系人。 如果有验证错误，他们应该内嵌显示，就像用户使用形式的非模态版本（红色边框领域，错误信息字段旁边）。

我加载像这样的模式：

<a data-toggle="modal" data-target="#new-contact-modal">Go modal!</a>

这里是自举模式，它调用相同的contacts/contact_fields在非模式版本局部使用。 应用程序/视图/联系人/ _new_modal.html.erb：

<div id="new-contact-modal" class="modal hide fade" tabindex="-1" 
     role="dialog" aria-labelledby="new-contact-modal-label" 
     aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" 
     aria-hidden="true">×</button>
    <h3 id="new-contact-modal-label"><%= t("contacts.new.header") %></h3>
  </div>
  <%= simple_form_for(@contact, 
      :remote => true,
      :html => {:class => "form-horizontal", 
                "data-type" => :json }) do |contact_form| %>
    <div id="new-contact-body" class="modal-body">
      <%= render 'contacts/contact_fields', :f => contact_form %>
    </div>
    <div class="modal-footer">
      <%= contact_form.submit :class => "btn btn-primary", 
          :"data-loading-text"=> ('simple_form.creating') %>
      <%= t('simple_form.buttons.or') %>
      <a data-dismiss="modal" aria-hidden="true">
        <%= t('simple_form.buttons.cancel') %>
      </a>
    </div>
  <% end %>
</div>

应用程序/控制器/ contacts_controller.rb（故意注释掉format.json行，因为我想送回去使用JavaScript全模式）：

def create
  @contact = Contact.new(params[:contact])
  <...some additional processing...>
  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 = "<%= escape_javascript(render :partial => 'contacts/new_modal', :locals => { :contact => @contact.errors }) %>";
$("#new-contact-modal").html($(modal));

应用程序/资产/ Java脚本/ 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");
    })
});

好消息是，这个工程当表单没有错误：添加联系人和模态是隐藏的。 但是，如果有验证错误，我得到的消息“JSON.parse：意外的字符”。 这个来自的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变量？ 或者是有干脆处理这个更简单的方法？

Answer 1:

这里的主要问题是调用与表单data-type => :json 。 这意味着它将把一个JSON响应，但我希望它传回的JavaScript。 解决的办法是设置data-type => :script （或刚刚离开其关闭，并让Rails的推断的JavaScript）：

:html => {:class => "form-horizontal", 
          "data-type" => :script }) do |contact_form| %>

由于该制品用于说明各种数据类型，以及澄清数据型是指反应 ，而不是数据的提交：

导轨3个远程链接和表单2部分：数据类型（与jQuery）

“jQuery的.ajax()方法提供了一种称为一个可选参数dataType来指定所需的数据类型的响应”。

我认为@wanghq指着另一个问题是，JQuery的.html()方法更新对象的innerHTML。 我卷绕创建部分仅包含形式，调用局部一个内<div id="new-contact-form-wrapper">包装，然后靶向包装替换形式：

var myForm = "<%= escape_javascript(render :partial => 'contacts/new_modal_form', :locals => { :contact => @contact.errors }) %>";
$("#new-contact-form-wrapper").html(myForm);

我仍然在获取变量传递工作，成功清除表单等。由于我使用的部分从控制器，我可能就继续前进，把所有的JQuery的（成功和失败）中有这么我不需要应用程序/资产/ Java脚本/ contacts.js。

Answer 2:

我不明白为什么你需要重新设置形式。 我认为这是没有必要的。

$(function($) {
  $("#new_contact")
    .bind("ajax:success", function(event, data, status, xhr) {
      ...
    })
});

你需要解决的一件事是低于你的new_model_error.js.erb行，否则就会有重复的div id为“新的接触模式”。

old:
$("#new-contact-modal").html($(modal)); 
new:
$("#new-contact-modal").html($(modal).html());

让我知道如果你仍然有问题。

文章来源: Display inline errors with simple_form in a Bootstrap Ajax modal