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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

922閲覧

Railsでjsファイルの読み込みエラー(Uncaught TypeError: $(...) "プラグイン名" is not a function)

lyzmfeqpxs54

総合スコア237

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/04/19 03:43

いつもお世話になります。

現在Railsでウェブページを作成しております。
lightbox機能を実装しようと、boxerを導入しようとしているのですがうまくいきません。

chromeの開発ツール(F12のやつです)で現在のエラーを確認すると
Uncaught TypeError: $(...).boxer is not a function
と出る状態です。

他のlightboxなどを導入しても
Uncaught TypeError: $(...) "プラグイン名" is not a function
と出るので、根本的にやり方が間違っているのでは無いかと思いこちらに質問いたしました。

boxerの場合を例に取りますと
jquery.fs.boxer.cssはapp/assets/stylesheets/直下に
jquery.fs.boxer.jsはapp/assets/javascripts/直下においたあと
bundle exec rake assets:precompile RAILS_ENV=production
を実行しております。

ここで質問なのですが、公式サイトなどには

<link href="jquery.fs.boxer.css" type="text/css" rel="stylesheet"> <script src="jquery.fs.boxer.js" type="text/javascript"></script>

とhtmlに書く、と書かれていますが、Railsにおいてはassets:precompileで場所が指定されるため

<link href="jquery.fs.boxer.css" type="text/css" rel="stylesheet"> <script src="jquery.fs.boxer.js" type="text/javascript"></script>

は記述する必要がないという解釈でよいでしょうか。

正しい場合、どういったことが読み込めない原因である可能性が高いでしょうか。
ご教示いただけますと幸いです。

よろしくお願いいたします。

Ruby

1 2#エラー 3 4Uncaught TypeError: $(...).boxer is not a function 5 6#呼出は 7show.html.erb 8<script> 9 $(".boxer").boxer(); 10</script> 11

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

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

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

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

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

m.ts10806

2018/04/19 04:00

ブラウザで表示した際のHTMLのソースコードに該当のjsを読み込み記述はあるのでしょうか?(Ruby詳しいわけではないので確認です)
lyzmfeqpxs54

2018/04/19 04:05

ご回答ありがとうございます。ソースコードには記述はありません。質問の通りjsファイルについてはわからないのですが、cssファイルはソースコードに記述がなくてもassets:precompileで読み込まれます。
guest

回答2

0

エラーの内容的に、jsファイルの読み込み順序の問題だと思います。

jqueryファイルが読み込まれる前にjquery.fs.boxer.jsが読まれていませんか?
jsファイルは上から順番に読まれるので、jquery.fs.boxer.jsの前に、jquery.jsを読み込む必要がありますよ。
(というかそもそもjquery自体は読まれていますか?)

シンプルなhtmlでjquery.jsとjquery.fs.boxer.jsを入れて試してみてください。

投稿2018/04/19 04:20

mtdsnsk

総合スコア789

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

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

0

下記、参考になりますでしょうか。

application.js

//= require_tree ../../../vendor/assets/javascripts/.
//= require_directory .
上の1文を追加。
もちろん、require_directoryとかrequire_treeの前に呼んでおかないと、プラグインの適用ができない(><)

投稿2018/04/19 04:08

m.ts10806

総合スコア80765

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問