Rails Bootstrap 4 с турболинками - PullRequest
Новая
       13

Rails Bootstrap 4 с турболинками

0 голосов
/ 13 октября 2019

У меня полнофункциональное приложение rails с установленным bootstrap-rubygem (v4.3).

В моем приложении есть партиал, который перерисовывается при remote: true ссылка нажата. При щелчке по этой ссылке у меня появляется контроллер, который отвечает на JS, а затем в моем представлении .js.erb я заменяю html определенного div.

Теперь в этом частичном представлении я использую всплывающие подсказки и выпадающие списки. Проблема в том, что всплывающие подсказки работают только после жесткого обновления. Как только я нажимаю, чтобы перезагрузить частичное удаленно, всплывающие подсказки перестают работать. Полная противоположность верна для выпадающих списков. Они не работают до тех пор, пока я не нажму на удаленную ссылку.

Я что-то упустил при настройке этого гема или, возможно, я ошибаюсь, когда внедряю бутстрап с 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

JS-представление для визуализации содержимого в файле div: sample / index.js.erb 

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

HAML-представление с всплывающей подсказкой и выпадающими меню 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 Ответ

1 голос
/ 13 октября 2019

Вы должны повторно инициализировать всплывающую подсказку 

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

после частичного повторного рендеринга, вы можете добавить его после рендеринга в свой файл js.erb

, чтобы решить проблему с выпадающим списком, на котором нужно их инициализироватьтурболинк: нагрузка как подсказка

...