質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

4275閲覧

[Rails] Bootstrap3.2のpopover.jsが動きません

S.N

総合スコア6

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2015/05/11 16:17

編集2015/05/15 10:10

初めての投稿で至らない点もあるかと思いますが、どうぞよろしくお願い致します。

Rails4.1.8環境下で開発しています。
Bootstrap3.2のpopoverを使いたく、以下のサンプルコードを貼り付けたのですが、動いてくれません。
どなたか分かる方がいらっしゃいましたら、ご教授お願い致します。

サンプルのコードは下記のサイトを参考にしました。
http://getbootstrap.com/javascript/#popovers

![イメージ説明]WIDTH:600

lang

1<button id="example" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> 2 3<script> 4$(function () { 5 $('[data-toggle="popover"]').popover(); 6}); 7</script>

Bootstrapのバージョンは3.2です。
vender/assets/javascripts/00_bootstrap
├bootstrap.js
└bootstrap.min.js

app/assets/javascripts/application.js

lang

1//= require jquery 2//= require jquery_ujs 3//= require_tree ../../../vendor/assets/javascripts/00_bootstrap/. 4//= require_tree ../../../vendor/assets/javascripts/10_template/.

app/views/layouts/application.html.erb

lang

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>Sample</title> 7<!-- スタイル ================================================== --> 8<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %> 9<%= javascript_include_tag 'application' %> 10<%= csrf_meta_tags %>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

jsのほかの処理でエラーが起きてませんか?
原因は分かりませんが、application.jsに一か所でもエラーがあると、
他の処理が動作しなくなる事があります。

エラー有無はchromeの開発者ツールのコンソールタブなどで確認できると思います。

投稿2015/05/13 17:10

ylang365

総合スコア175

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.N

2015/05/15 10:06

ylang365さん、回答ありがとうございます! ご指摘してくださったとおり、ブラウザのコンソールを確認したところ、 jsの処理にエラーがありました。 エラーの原因はjQueryで、application.jsでjQueryファイルの読み込みを止めたところ、 無事動くようになりました。 Railsでは標準でjquery-railsのgemが入っている事を、よく分かっていませんでした。 ありがとうございます、大変助かりました!
guest

0

HTMLやBootstrapの問題ではないようですね。
次のようなコードで 問題なく chrome/ Firefox / IE11 で動作しました。

lang

1<!DOCTYPE html><html lang="ja"> 2 <head> 3 <meta charset="UTF-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <title>9714 answer</title> 6 <!-- Latest compiled and minified CSS --> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 8 <!-- Optional theme --> 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 10 </head> 11 <body> 12 <button id="example" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> 13 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 14 <!-- Latest compiled and minified JavaScript --> 15 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 16 <script type="text/javascript"> 17$(function () { 18 $('[data-toggle="popover"]').popover(); 19}); 20 </script> 21 </body> 22</html>

バージョンの問題かと思って Bootstrap の版を 3.2.0にしたり、jQuery を2.1 系にしたりしてみましたが 特に影響は見られませんでした。
というわけで、実際にブラウザに展開される HTMLを 記載してみてはいかがでしょうか。

投稿2015/05/12 03:35

編集2015/05/12 03:36
okayu3

総合スコア200

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S.N

2015/05/12 12:35

okayu3さん、解答ありがとうございます! 上記の解答のように、bootstrap.jsをCDNで読み込むと上手くいくようです。 何故<%= javascript_include_tag 'application' %>でうまく行かないのかは、不明のままです。コンソールを見る限りではファイルはキチンと読み込まれているように思えます。 ひとまずCDNで読み込むことで動くようになりましたが、もう少し原因を探ってみたいと思います。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問