带有 Turbolinks 的 Rails Bootstrap 4 [英] Rails Bootstrap 4 with Turbolinks

问题描述

我有一个功能齐全的 Rails 应用程序，带有 bootstrap-rubygem (v4.3)已安装.

I have a fully functional rails app with the bootstrap-rubygem (v4.3) installed.

在我的应用程序中，当点击 remote: true 链接时，我会重新渲染一个部分.单击此链接时，我有一个响应 JS 的控制器，然后在我的 .js.erb 视图中替换特定 div 的 html.

In my app I have a partial that gets re-rendered when a remote: true link is clicked. When this link is clicked I have a controller that responds to JS and then in my .js.erb view I replace the html of a specific div.

现在在这个局部视图中，我使用了工具提示 &落下.问题是，工具提示仅在硬刷新后才起作用.一旦我单击远程重新加载部分，工具提示就会停止工作.下拉菜单的情况正好相反.在我点击远程链接之前，它们不起作用.

Now in this partial view, I make use of tooltips & dropdown. The problem is, the tooltips only work after a hard refresh. As soon as I click to reload the partial remotely, the tooltips stop working. The exact opposite is true for the dropdowns. They don't work until I click on the remote link.

我是否在设置这个 gem 时遗漏了任何东西，或者我在使用 JQuery & 实现引导程序的方式上犯了一个错误?涡轮链接?

Have I missed anything in setting up this gem or am I perhaps making a mistake in the way I'm implementing bootstrap with JQuery & Turbolinks?

主JS文件:application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
$(document).on('ready turbolinks:load', function () {
  $('[data-toggle="tooltip"]').tooltip();
});

主布局文件:application.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Dummy App
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    #sample-wrapper= render "sample/index"
    = yield

在 div 中渲染内容的 JS 视图:sample/index.js.erb

$("#sample-wrapper").html("<%= j (render 'sample/index' ) %>");

带有工具提示的 HAML 视图 &下拉示例/index.haml

.card
  %h1{data: {toggle: "tooltip", placement: "bottom", title: @sample.title}}= @sample.title
  .dropdown.card-options
    %button#dropdownMenu1.btn.btn-ghost.dropdown-toggle.no-caret{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
      = fa_icon "ellipsis-h"
    .dropdown-menu.dropdown-menu-right{"aria-labelledby" => "dropdownMenu1"}
      = link_to "Edit", edit_sample_path(@sample.token), class: "dropdown-item", remote: true

推荐答案

你必须重新初始化工具提示

You have to reinitialize tooltip

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

rerender partial 后，你可以在 js.erb 文件渲染后添加

after rerender partial, you can add it after render in your js.erb file

要解决下拉列表中的问题，您必须在 turbolinks 上初始化它们:像工具提示一样加载

to solve peoblem with dropdown you have to initialize them on turbolinks:load like the tooltip is

这篇关于带有 Turbolinks 的 Rails Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！