Ruby on Rails 6. 使用带有 Ajax 的 Bootstrap 4 工具提示

Posted 2023-05-09

【中文标题】Ruby on Rails 6. 使用带有 Ajax 的 Bootstrap 4 工具提示

【英文标题】：Ruby on Rails 6. Using Bootstrap 4 tooltips with Ajax

【发布时间】：2020-11-07 15:27:41

【问题描述】：

我已经通过 Webpacker 设置了 Bootstrap 4、Jquery 和 Popper.js。

application.js 文件 (app/javascript/packs/application.js)：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap"

document.addEventListener("turbolinks:load", () => 
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
)

environment.js 文件 (config/webpack/environment.js)：

const  environment  = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin(
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  )
)

environment.config.set('resolve.alias', jquery: 'jquery/src/jquery');

module.exports = environment

在我开始使用 Ajax 之前，我的工具提示可以正常工作。 使用 Ajax 更改页面后，工具提示停止工作。

我尝试将 $('[data-toggle="tooltip"]').tooltip() 代码插入到我的 js.erb 文件中，但我总是在浏览器控制台：

VM26:4 Uncaught TypeError: $(...).tooltip is not a function
    at <anonymous>:4:30
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
(anonymous) @ VM26:4
processResponse @ rails-ujs.js:283
(anonymous) @ rails-ujs.js:196
xhr.onreadystatechange @ rails-ujs.js:264

页面视图的一部分，带有使用工具提示的元素：

...
      <td class="pl-2">
        <%= link_to @card, method: :delete, data:  confirm: "You sure?" , 
            remote: true do %>
          <i class="fas fa-times" id="deleteIcon" 
             data-toggle="tooltip" title="Delete"></i>
        <% end %>
      </td>
...

我怎样才能让它工作？

【问题讨论】：

我刚刚注意到使用分页链接时工具提示停止工作（它们也通过'remote：true'进行分页）。

我遇到了同样的问题，我通过 Ajax 加载的任何部分都无法从我的 app/javascript/packs/application.js 中找到内容。你有想过吗？

我刚开始使用 'tippy.js' 而不是 Bootstrap 工具提示。

【参考方案1】：

对于以后阅读本文的任何人，这就是我能够解决问题的方法。

我必须销毁（处置）所有引导工具提示并重新创建它们。 你可以在你的 ajax 成功中调用它。在我的例子中，我使用刺激反射和变形页面，所以我在 finalizeReflex 回调中调用它。

$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip();

显然是修复工具提示的一种老套方法，但我只能做到这一点。