在 AJAX 更新 Ruby on Rails 6 后，语义 UI 模式不会重新打开

Posted 2023-05-09

【中文标题】在 AJAX 更新 Ruby on Rails 6 后，语义 UI 模式不会重新打开

【英文标题】：Semantic-UI Modal won't re-open after an AJAX Update Ruby on Rails 6

【发布时间】：2020-12-03 18:15:46

【问题描述】：

当我使用 AJAX 更新记录的表行时。我无法重新打开语义 ui 的模式，但是当我在更新记录之前单击打开模式按钮时 - 这样做没有问题。有没有人经历过这个？在 Rails 中进行 AJAX 更新后，如何让模式重新初始化？奇怪的是按钮的id还是设置的，只是更新记录后没有打开modal。

chart_records_controller.rb

def update

respond_to |format|
   if @chart_record.update(chart_record_params)
   format.js 
 else
  format.js 
 end
end

update.js.erb

document.getElementById('<%= dom_id(@chart_record, 'inline_form') %>').remove()
document.getElementById('<%= dom_id(@chart_record, 'inline_form') %>').innerhtml = "<%= j render @chart_record %>"
document.getElementById('<%= dom_id(@chart_record, 'inline_form') %>').style.display = 'table-row'

_chart_record.html.erb

<div class="divTableCell"><%= link_to chart_record.date %></div>
<div class="divTableCell"><%= link_to chart_record.username %></div>
<div class="divTableCell">
 <button class="ui icon button" id="chart_record_comment_btn_<%= chart_record.id">
</button>

<div class="ui modal chart_record_comment_modal_<%= chart_record.id %>">
  <i class="close icon"></i>
 <div class="p-3">
   <%= simple_form_for(chart_record, url: update_comment_for_chart_record(id: chart_record.id), method: :post, remote: true) do |f| %>
  <%= f.input :comment_body, as: :text, label: "Comment" %>   
  <%= f.submit 'Update Comment', class: 'ui button' %>
<% end %>
 </div>
</div>
</div>

<script>
 // only works before record is updated inline.
 $('#chart_record_btn_<%= chart_record.id' %>').click(function() 
    $('ui.modal.chart_record_comment_modal_<%= chart_record.id %>').modal('show')
  );
</script>

【问题讨论】：

运行更新后，打开浏览器控制台并运行$('ui.modal.chart_record_comment_modal_<%= chart_record.id %>').modal('show')以验证它是否仍然有效。将<%= chart_record.id %> 替换为真正的指定ID，因为它在浏览器控制台中作为纯javascript 运行。

我会尽快尝试。但是，奇怪的是，在使用 AJAX 进行更改后，模态不再起作用。

我得到 jQuery.fn.init [prevObject: jQuery.fn,init(1)] 长度: 0 proto: Object(0)

在按钮本身的 onclick="" 参数中放入 $('ui.modal.chart_record_comment_modal)... 后，它起作用了。

尝试将 $('ui.modal.chart_record_comment_modal_<%= chart_record.id %>').modal('show') 添加到更新 js 文件中

【参考方案1】：

我只是简单地使用按钮本身的 onclick 参数调用了模式。我认为更新迫使 DOM 进入未就绪状态。看起来很老套，但没有其他方法可以让 JS 重新初始化模态。

<button type="button" onclick="$('ui.modal.chart_record_comment_modal_<%= chart_record.id %>').modal('show')"><i class="icon comment outline"></i></button>