Rails Bootstrap 4 with Turbolinks

两盒软妹~` 提交于 2021-01-29 14:14:52

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!