2

编辑：我忘了提到我在模型级别使用验证，而且效果很好。因此，验证阻止了模式表单被提交（并且 ajax:error 被调用），但我没有运气处理生成的错误对象并正确显示错误。现在我只使用占位符文本（“FORM HAS ERRORS”）。同样，验证和显示错误在我的非模态（非 ajax）表单（我使用部分错误消息）中工作正常。我真的希望我可以在我的模态对话框中渲染那个部分，你会认为这很简单。

我正在为此拔头发。

我有一个“添加游览”表单，在该表单中，您可以从数据库中选择建筑物以添加到游览中（我正在使用 jquery tokeninput 来搜索和选择建筑物）。所有这些都很好。

我通过提供“添加建筑物”链接为用户添加了添加新建筑物的功能，该链接会显示一个模式表单。我处理了结果，一切都很好（建筑被保存，模态被解雇，令牌被添加等等）。

除了以模态形式进行验证外，一切都很好。. . 这根本不起作用。我尝试过 client_side_validations，我尝试过编写咖啡脚本来遍历控制器返回的错误对象等。

无论如何，我已经尝试了我所知道的一切尝试，所以现在我要向你们寻求帮助。现在我只是在咖啡脚本文件中有占位符错误处理代码（它只是以非常基本的方式显示“FORM HAS ERRORS”）。我放弃了之前的所有尝试来制作这项工作，因为它变得越来越丑陋，我真的只是在寻找最好的方法来做到这一点。

以下是相关文件。

building.js.coffee 

$ ()->
  $("form.new_building").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_building")[0].reset()
    $('#new-building-modal').modal('hide')
    fulladdress = "#{data.address} (#{data.name}, #{data.city}, #{data.zip})"
    $('#tour_building_tokens').tokenInput("add", {id: data.id, address: fulladdress} )

  $("form.new_building").on "ajax:error", (event, xhr, status, error) ->
    $('#display_errors').append('<font color="red"><strong>FORM HAS ERRORS</strong></font><br><br>')
    $('#display_errors').show()

建筑物控制器.rb

....

def create
    @building = Building.new(params[:building])

    respond_to do |format|
      if @building.save
        format.html { redirect_to @building, notice: 'Building Created!' }
        format.json { render json: @building, status: :created, location: @building }
      else
        format.html { render 'new' }
        format.json { render json: @building.errors, status: :unprocessable_entity }
      end
    end
end

新的.html.erb

<% provide(:title, 'Add Tour') %>

<h1>Add Tour</h1>

<div class="row">
    <div class="span6 offset3">
        <%= form_for(@tour) do |f| %>

            <%= render 'fields', f: f %>

            <%= link_to 'Add Building', '#new-building-modal', 'data-toggle' => "modal" %>

            </br>
            </br>

            <%= f.submit "Add Tour", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>


<div id='new-building-modal' class='modal hide fade'>


            <div class = "modal-body">

                <%= form_for(Building.new, remote:true, html: {"data-type" => :json}) do |f| %>

                    <div id="display_errors" style="display:none;">
                    </div>

                    <%= f.label :name %>
                    <%= f.text_field :name %>

                    <%= f.label :address %>
                    <%= f.text_field :address %>

                    <%= f.label :city %>
                    <%= f.text_field :city %>

                    <%= f.label :zip %>
                    <%= f.text_field :zip %>

            </div>

            <div class = "modal-footer">

                    <%= f.submit "Add Building", class: "btn btn-large btn-primary" %>
            </div>

                <% end %>
</div>

哦，我还有一个共享的错误消息部分，我现在没有使用这个模态（因为我无法让模态“刷新”以显示错误）。在一个完美的世界中，我会在模态中使用相同的部分，因为它与我的其他非模态形式配合得很好。

这是部分（同样，当前在上面的代码中没有呈现它）。

<% if object.errors.any? %>
<div id="error_explanation">
    <div class="alert alert-error">
        The form contains <%= pluralize(object.errors.count, "error") %>.
    </div>
    <ul>
        <% object.errors.full_messages.each do |msg| %>
            <% if msg != "Password digest can't be blank" %>
                <li>* <%= msg %></li>
            <% end %>
        <% end %>
    </ul>
</div>

提前感谢任何人都可以提供的任何帮助。我需要尽可能多的细节。我在 Stack Overflow 上研究过相关问题，每次我认为我很接近时，我都会空手而归。

4

2 回答 2

2

感谢muttonlamb为我指明了正确的方向。我有 50% 的把握肯定它必须通过解析 JSON 来做点什么，他说服我继续走这条路。具有讽刺意味的是，正是这个 SO 问题帮助我得到了最终答案。这个问题的答案，包括将错误打印到控制台，正是我想要的。事实证明，我解析错误并没有太多。. . 我正在解析错误的对象。这是最终的有效实现。. .

新的咖啡脚本（注意我如何根据需要显示、隐藏和清除 div）：

$ ()->
  $("form.new_building").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_building")[0].reset()
    $('#new-building-modal').modal('hide')
    fulladdress = "#{data.address} (#{data.name}, #{data.city}, #{data.zip})"
    $('#tour_building_tokens').tokenInput("add", {id: data.id, address: fulladdress} )
    $('#error_explanation').hide()

  $("form.new_building").on "ajax:error", (event, xhr, status, error) ->
    errors = jQuery.parseJSON(xhr.responseText)
    errorcount = errors.length
    $('#error_explanation').empty()
    if errorcount > 1
      $('#error_explanation').append('<div class="alert alert-error">The form contains ' + errorcount + ' errors.</div>')
    else
      $('#error_explanation').append('<div class="alert alert-error">The form contains 1 error</div>')
    $('#error_explanation').append('<ul>')
    for e in errors
      $('#error_explanation').append('<li>' + e + '</li>')
    $('#error_explanation').append('</ul>')
    $('#error_explanation').show()

新观点：

<% provide(:title, 'Add Tour') %>

<h1>Add Tour</h1>

<div class="row">
    <div class="span6 offset3">
        <%= form_for(@tour) do |f| %>

            <%= render 'fields', f: f %>

            <%= link_to 'New Building', '#new-building-modal', 'data-toggle' => "modal" %>

            </br>
            </br>

            <%= f.submit "Add Tour", class: "btn btn-large btn-primary" %>
        <% end %>
    </div>
</div>


<div id='new-building-modal' class='modal hide fade'>

            <div class = "modal-header">
                <div id="error_explanation" style="display:none;">
                </div>
            </div>

            <div class = "modal-body">

                <%= form_for(Building.new, remote:true, html: {"data-type" => :json}) do |f| %>

                    <%= f.label :name %>
                    <%= f.text_field :name %>

                    <%= f.label :address %>
                    <%= f.text_field :address %>

                    <%= f.label :city %>
                    <%= f.text_field :city %>

                    <%= f.label :zip %>
                    <%= f.text_field :zip %>

            </div>

            <div class = "modal-footer">

                    <%= f.submit "Add Building", class: "btn btn-large btn-primary" %>
            </div>

                <% end %>
</div>

新控制器：

def create
     @building = Building.new(params[:building])

    respond_to do |format|
      if @building.save
        format.html { redirect_to @building, notice: 'Building Created!' }
        format.json { render json: @building, status: :created, location: @building }
      else
        format.html { render 'new' }
        format.json { render json: @building.errors.full_messages, status: :unprocessable_entity }
        end
    end
  end

最后，为了在添加错误时防止模式滚动（我希望它自动调整大小），我添加了这个 CSS：

#new-building-modal {
    max-height: 600px;
}

希望所有这些细节可以防止其他人不得不在愚蠢的模态验证错误上浪费近一周的时间。

于 2013-03-19T03:48:37.613 回答
0

该问题看起来像您的 ajax 请求错误部分没有运行。

原因是这样，您要查找的错误可能类似于“找不到页面”或其他一些 HTTP 错误。

在您的控制器中，HTTP 请求仍然会成功，即它仍然会返回数据。

您处理是否存在错误的逻辑应该在 ajax 成功块中。

希望这是有道理的

$ ()->
  $("form.new_building").on "ajax:success", (event, data, status, xhr) ->
    $("form.new_building")[0].reset()
    $('#new-building-modal').modal('hide')
    fulladdress = "#{data.address} (#{data.name}, #{data.city}, #{data.zip})"
    $('#tour_building_tokens').tokenInput("add", {id: data.id, address: fulladdress} )

您需要检查本节中的错误变量。

于 2013-03-18T05:49:13.770 回答