时间戳

首页 > 解决方案 > Ruby on Rails 6. 使用带有 Ajax 的 Bootstrap 4 工具提示

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

问题描述

我已经通过 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>
...

我怎样才能让它工作？

标签： jqueryruby-on-railswebpackbootstrap-4turbolinks

解决方案

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

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

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

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

推荐阅读