问题
I have a fully functional rails app with the bootstrap-rubygem (v4.3) installed.
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.
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?
Main JS file: application.js
//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
$(document).on('ready turbolinks:load', function () {
$('[data-toggle="tooltip"]').tooltip();
});
Main Layout File: 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
JS view to render content in div: sample/index.js.erb
$("#sample-wrapper").html("<%= j (render 'sample/index' ) %>");
HAML view to with tooltip & dropdowns sample/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
回答1:
You have to reinitialize tooltip
$('[data-toggle="tooltip"]').tooltip()
after rerender partial, you can add it after render in your js.erb file
to solve peoblem with dropdown you have to initialize them on turbolinks:load like the tooltip is
来源:https://stackoverflow.com/questions/58364890/rails-bootstrap-4-with-turbolinks