ruby-on-rails Bootstrap 5使用Modal切换跟随链接URL

lymnna71 于 2023-11-20 发布在 Ruby

关注(0)|答案(2)|浏览(125)

我尝试使用Bootstrap 5从链接中打开Modal，然后通过将请求发送到服务器上来动态加载内容（modal的主体），然后服务器将返回内容（remote_modal_content），以神奇地加载到现在可见的Modal主体中。
使用Rails 7 / Turboframes。
我的链接：

<a data-turbo-frame="remote_modal_content" data-bs-toggle="modal" data-bs-target="#remote_modal_frame" class="btn btn-outline-primary" href="/lists/3/issue_items/new">+</a>

字符串
要打开的remote_modal_frame：

<div class="modal fade" id="remote_modal_frame" 
    tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">

        <%= turbo_frame_tag "remote_modal_content" %>

    </div>
</div>

型
点击链接会打开Modal，但对href的请求不会发送到服务器，因此魔术永远不会发生（模态内容没有填充）。
我正在使用Bootstrap 4（使用JavaScript而不是turbo）做类似的事情，所以这似乎是Bootstrap 5中的新行为。
我很高兴有人能为我提供任何帮助。
谢了，马克

ruby-on-rails

来源：https://stackoverflow.com/questions/74546185/bootstrap-5-follow-link-url-with-modal-toggle

2条答案

按热度按时间

sqxo8psd1#

我在hotwired社区论坛上解决了这个问题：https://discuss.hotwired.dev/t/dynamically-load-content-into-bootstrap-modal-using-turbo-stimulus/4607/2

赞(0）回复(0）举报 2023-11-20

csbfibhn2#

如果你不想使用刺激，你可以加载你的数据与涡轮增压，然后模拟点击特殊的隐藏链接打开模态。

原来的功能将保持不变：Turbo将从show.html.erb加载内容并将其粘贴到模式内的turbo_frame。
JS代码捕获真实的单击，并模拟单击隐藏元素以打开模态。

这是一个变通的解决方案，但它很简单，而且很有效。

<%= turbo_frame_tag item do %>
  <%= link_to "details", item_path(item), data: { turbo_frame: "item-frame" } %>
<% end %>

<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="itemModalLabel">item</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <%= turbo_frame_tag "item-frame" %>
    </div>
  </div>
</div>

<%= link_to "Show Modal", '#', data: { bs_toggle: "modal", bs_target: "#itemModal" }, id: "show-item-modal-id", class: "d-none" %>

<script>
  document.addEventListener("click", function (event) {
    if (event.target.getAttribute("data-turbo-frame") === "item-frame") {
      document.querySelector('#show-item-modal-id').click();
    }
  });
</script>

字符串
在show.html.erb中：

<%= turbo_frame_tag "item-frame" do %>
  <%# item content %>
<% end %>

型

赞(0）回复(0）举报 2023-11-20

我来回答

ruby-on-rails Bootstrap 5使用Modal切换跟随链接URL

2条答案

相关问题

热门标签

最新问答