5

我在这里和这里发现了类似的 StackOverflow 问题，但仍然无法正常工作。

我正在使用 Rails 3.2.8、SimpleForm 2.0.4 和 Twitter Bootstrap 2.1.1（通过 bootstrap-sass gem 2.1.1.0）。

用户应该能够从模式弹出窗口中添加联系人。如果存在验证错误，它们应该内联显示，就像用户使用表单的非模态版本一样（字段周围的红色边框，字段旁边的错误消息）。

我像这样加载模态：

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

这是 Bootstrap 模态，它调用contacts/contact_fields非模态版本中使用的相同部分。app/views/contacts/_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>

app/controllers/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));

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

好消息是，这在表单没有错误时有效：添加了联系人并隐藏了模式。但是，如果存在验证错误，我会收到消息“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 变量进行处理？或者有没有更简单的方法来完全处理这个问题？

4

2 回答 2

2

这里的主要问题是使用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。我最终创建了一个仅包含表单的部分，在包装器内调用部分<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（成功和失败）放在那里所以我不需要app/assets/javascripts/contacts.js。

于 2012-11-17T04:46:30.337 回答
0

我不明白你为什么需要重置表格。我认为没有必要。

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

您需要修复的一件事是在new_model_error.js.erb中的行下方，否则您将拥有id="new-contact-modal" 的重复 div 。

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

如果您还有问题，请告诉我。

于 2012-11-16T06:38:58.850 回答