超メモ帳(Web式)@復活

統合失調症を患い、はてなからも逃亡。現在、復活のため準備中。


SPONSORED LINK

「Uncaught TypeError: $(…).fancybox is not a function」が出た時の対処方法。

f:id:yuki_2021:20171130232713j:plain:w300


明日から12月だけどなんか暑い。バスでじっとりと汗をかく。だって沖縄は現在、最高気温27度とかあるんだぞ? 温度が高い時と低い時で高低差がありすぎる。最近10度近く差がある。長袖にした途端、最高気温が25度以上まで上がるんだもんなぁ。やってられんわ。


さて、今日は技術ネタ。仕事でjqueryライブラリの依存関係でハマってね。同じトラブルで困っている人もいるかもしれないのでメモしておこう。まぁ、プログラマってのはこういうトラブルの解決方法とかの情報はネットで共有するのが基本だ。僕のブログも最初はtechブログとして開設された。最近はなんでもありありの雑記ブログとして更新されているが、過去に書かれた技術情報にはGoogleからのアクセスが絶えない。僕だって困った時に検索して答えに辿りついて助けられているので、こういうのはお互い様の意味で情報共有はしている。


さて、表題で書いてある通りfancyboxのエラーについて書かせてもらう。fancyboxってライブラリはlightboxみたいな形式でwebページを表示できるjqueryライブラリだ。wordpressのpluginなどで使われている事も多いので気づかぬうちに使っている人も多いだろう。


Fancybox - Fancy jQuery lightbox alternative


お仕事でこいつを使った処理を作りたいので触っていたんだけど、読み込みの時に「Uncaught TypeError: $(…).fancybox is not a function」が出て、うんともすんとも言わなくてな。随分時間突っ込んじゃって手こずった。


あ、まず、率直に答えだけ書いとくと、funcybox1.3.4はjquery1.10.xで動かないから発生しているバグです。jqueryの1.9.0で廃止した関数を使用してたっぽいです。古いjqueryの補完をするjquery-migrateを追加で読み込むと正常に動くようになります。


javascript.webcreativepark.net

<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>


これでエラーは出なくなって読み込めるようになるかと。


あとは色々と補足情報。fancyboxのエラーに関してはこれで良いんだけどjqueryを使っていて「Uncaught TypeError:(ファンクション名) is not a function」が出てきた場合は大抵の場合バージョンの違うjqueryの競合が起きている。wordpressなんかで素人が下手にheader.phpやfunction.phpなんぞを弄ると発生するエラーだ。そちらの解決方法も書いておこう。


基本的にはソースを上から下まで全部読んでjqueryの読み込みを一つに直せというのが最適解。


qiita.com


複数のバージョンのjqueryを共存させる方法もある。


qiita.com


こんな感じ。

<script type="text/javascript" src="jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="jquery-1.4.3.min.js.">
</script>
<script type="text/javascript">    
    var $143 = $.noConflict(true);
    
    (function($){
        $(function(){
            console.info("jQuery = " + $.fn.jquery);
        });
    })(jQuery);
 
    (function($){
        $(function(){
            console.info("$143 = " + $.fn.jquery);
        });
    })($143);
</script>


上記では一回目のconsole.infoではjquery2.0.3が出力され、二度目ではjquery1.4.3が出力される。jQuery.noConflict(true)という関数は現在読み込まれているjqueryのグローバルスコープをローカルのオブジェクトに置き換えるっぽい。


jQuery.noConflictのドキュメントはこちら。


jQuery.noConflict() | jQuery API Documentation


まぁ色々と書いたけど、fancyboxのnot a functionに関しては、競合じゃなくて新しいバージョンのjqueryで動かないだけなのでそちらは勘違いしないように。

プライバシーポリシー免責事項