Help us understand the problem. What is going on with this article?

[jQuery] [HTML] えっ!? <script>にも読み込み順序とかあんの?

今日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

・・・:disappointed_relieved:

問題はHTMLの方でした

関数がないと言われいろいろ試しました。
jQuery(function ($) {の部分の表記がいろいろあるみたいなので全部試してみたり、jQuery-Validation-Engineの部分を別のプラグインにしてみたり・・・
結果は全戦全敗。
全部関数の不存在によるエラー。

というわけでロードに問題があるのではないかとHTMLを疑うことに。

before
<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>

パスが問題か?

after
<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-1.6.2.js"></script>
<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-1.6.2.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を2番目に読み込んでいる場合です。
つまり、cookie.jsの読み込み位置は
「その他のjQuery関連ファイルよりも後でなくてはならない」
ようです。

とりあへず、解決しました。

まさか・・・
こうなのか?

afterのafter
<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ファイルをロードしないと誰もそれを利用できないと・・・

はぁ?
基本すぎて誰も教えないだって?
初心者はそういうところで困っているのです!!(逆ギレ):angry:
これからjQueryを誰かに教えるときは私はここから教えることにします!!(宣言)

まとめ

jQueryファイルを上に!
プラグイン共を下に!!
(scriptファイルの読み込み時は、変数・関数などの定義優先権を考慮して読み込みましょう、という話。)

最後に

大事なことなのでもう一度言います。
今日jQueryを初めた人の記事です。

追記(2016/11/14)

リンク先が消滅していたので、本文を探し出してきて追記。
 
 
 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした