Rails 语义 UI 模式创建额外的 Dom 元素

Question

我有一个显示验证错误的模式。我的问题是，每次我关闭模态并再次触发它时，它都会重复，然后我必须关闭它两次。

问题是这样的：

该解决方案无效。我不确定这是否是 rails 处理部分的方式的问题，或者我是否在错误地实施模态。我需要帮助了解发生了什么以及如何修复它。

index.html

<div class="eight wide stackable column">
  <div id="payee_errors"></div>
</div>

部分错误：

<div class="ui modal">
  <div class="header"><%= pluralize(target.errors.count, "error") %> prohibited this  <%= target.class.to_s.underscore.humanize.downcase %> from being saved:</div>
  <div class="content">
    <h3 class="header">
      There were problems with the following fields:
    </h3>
    <div class="ui list">
      <% target.errors.full_messages.each do |msg| %>
          <div class="item">
            <%= msg %>
          </div>
      <% end %>
    </div>
  </div>
  <div class="actions">
    <div class="ui green cancel button">Ok. It won't happen again.     </div>
  </div>
</div>

create.js.coffee

$("#payee_errors").html("<%=escape_javascript(render partial: 'errors' , :locals => {:target => @payee }) %>")
$('.ui .modal').modal('show')

编辑：

下面的答案让我朝着正确的方向前进。这就是我最终要做的。他的回答之间的唯一区别是我不得不使用其 onApprove 回调方法隐藏模态。

$('.ui.modal').html('')
$("#payee_errors").html("<%=escape_javascript(render partial: 'errors/errors' , :locals => {:target => @payee }) %>")
$('.ui.modal').modal(
  onApprove: ->
    $('.ui.modal').modal 'hide'
    return
).modal 'show'

Answer 1

问题在于，当您关闭模态框时，您只是将其隐藏，而没有破坏您创建的内容。

解决方法是在关闭之前清除div，像这样：

$('.ui .modal').html('')
$('.ui .modal').modal('hide')

Rails 语义 UI 模式创建额外的 Dom 元素

Rails Semantic UI Modal Creating Additional Dom Elements

ruby-on-rails

semantic-ui