今日jQueryを初めた人の記事です。
あしからず。。。
##経緯
最近Webアプリケーションの構築にドハマりしていて、JSONを返すだけの面白くないAPIづくりは一旦おいておいて、インターフェイス作りもやろうということでHTML + CSSを猛勉強している次第です。
いや、別に仕事で使うとかじゃなくて、趣味でなんですけどね。
Node.jsは使っている人なので、Javascriptはあらかたわかっているのですが、今日からみんな大好きjQueryを使いはじめることにしました。
で、いきなり3行しかないjavascriptのコードにハマりまくりました、ええ、それはもう盛大に。
##問題のコード
今までバリデーションは全てPHPでやってエラーを返していましたが、そりゃ画面側でリアルタイムにやれるならやりたいということでPOST前検診（変な言い方・・・）をjavascriptさんに担当してもらおうと一番有名っぽそうなjQuery-Validation-Engineを選択。
簡単そうですし。
jQuery(function ($) {
$("#form").validationEngine();
});
TypeError: $(...).validationEngine is not a function
・・・
##問題はHTMLの方でした
関数がないと言われいろいろ試しました。
jQuery(function ($) {の部分の表記がいろいろあるみたいなので全部試してみたり、jQuery-Validation-Engineの部分を別のプラグインにしてみたり・・・
結果は全戦全敗。
全部関数の不存在によるエラー。
というわけでロードに問題があるのではないかとHTMLを疑うことに。
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
パスが問題か？
<link href="./css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
変わらない・・・
その時google先生は似たような患者さんを探し当ててくれました。
jQueryのcookie.js で $.cookie is not a function エラー（リンク切れ）
jQueryのプラグインcookie.jsを使おうとしたら、
$.cookie is not a function
というエラーが出ました。なんでー？？？
調べてみると
$.cookie(name);
というコードでエラーが発生しています。
cookie.jsの基本中の基本のところです。ネットを調べても、原因がよく分かりません。
結局、試行錯誤の末にたどり着いた解決策は・・・
HTMLのタグ内での、cookie.jsの読み込み位置の変更です。エラーが発生する場合：
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>
エラーが発生しない場合：
<script type="text/javascript" src="/js/jquery-ui/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
エラーが発生するのは、cookie.jsを２番目に読み込んでいる場合です。
つまり、cookie.jsの読み込み位置は
「その他のjQuery関連ファイルよりも後でなくてはならない」
ようです。とりあへず、解決しました。
まさか・・・
こうなのか？
<link href="./css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine-ja.js"></script>
Error「」
あっ・・・順番が・・・あるんですね・・・
まず、jQueryファイルをロードしないと誰もそれを利用できないと・・・
はぁ？
基本すぎて誰も教えないだって？
初心者はそういうところで困っているのです！！（逆ギレ）
これからjQueryを誰かに教えるときは私はここから教えることにします！！（宣言）
##まとめ
jQueryファイルを上に！
プラグイン共を下に！！
（scriptファイルの読み込み時は、変数・関数などの定義優先権を考慮して読み込みましょう、という話。）
##最後に
大事なことなのでもう一度言います。
今日jQueryを初めた人の記事です。
##追記(2016/11/14)
リンク先が消滅していたので、本文を探し出してきて追記。