ブートストラップ3を使用してRailsパーシャルにポップオーバーを実装するにはどうすればよいですか？

Question

私は現在、Bootstrap 2（gem twitter-bootstrap-rails 2.2.8）を実行しているRails 4アプリケーションを持っています。私は、リンクがクリックされたときに地図が表示される部分を使ってポップオーバーを実装するのに成功しました。ここに私のコードがあります。

application.js

//= require jquery 
//= require jquery_ujs 
//= require twitter/bootstrap 
//= require_tree . 

bootstrap.js.coffee

jQuery -> 
    $(".popover-map").popover({ html : true }) 

_MAP

<div class="row-fluid"> 
    <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div> 
    <div class="span4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div> 
    <div class="span4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div> 
</div> 

_map_marfa

<p align="center"><%= image_tag("map-marfa.jpg", alt: "#{t :map_marfa_head}") %></p> 

_map_bigbend

<p align="center"><%= image_tag("map-bigbend.jpg", alt: "#{t :map_bigbend_head}") %></p> 

私はどちらかのリンクをクリックし、以下の地図表示をし、人はマップを閉じるにはもう一度リンクをクリックするまでそこにとどまります。新しいRails 5 Bootstrap 3アプリケーションにコードをコピーしました。ここでは、ブートストラップ3.

のためのコードの変更はapplication.jsです

//= require bootstrap-sprockets 

bootstrap.js.coffeeは今

<div class="row"> 
    <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_marfa_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_marfa_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_marfa'}") %></div> 
    <div class="col-md-4" align="center" id="text-85"><%= "#{t :map_msg_click}" %></div> 
    <div class="col-md-4" align="center" id="text-bold"><%= link_to("#{t :map_bigbend_head}" , '#', class: "popover-map", rel: "popover", title: "#{t :map_bigbend_head}", :"data-placement" => "bottom", :"data-content" => "#{render 'pages/map_bigbend'}") %></div> 
</div> 

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require_tree . 
//= require bootstrap-sprockets 

_MAP

をbootstrap.coffeeに名前が変更されましたいずれかのリンクをクリックすると地図が表示され、リンクがクリックされるまですぐに表示されなくなります。

Answer 1

私はこれを見守って、application.jsにターボリンクが必要であることを認識しました。どんな理由であれ、それは私がやろうとするものを駄目にする。私は//= require turbolinksを削除し、スクリプトは再び動作します。 Go figure。