忍者ブログ

カウンター

プロモーション

カレンダー

10 2024/11 12
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

AntinomyMy の実験室

   私のWEBアプリ実験室です!

ブログ内検索

楽天でお買い物

twitter

最新トラックバック

最新コメント

忍者アナライズ

ウェザーニュース

バーコード

本を買う

アクセス解析

Google+

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


  • 2024/11/22 03:42

jQuery ui は外部スクリプトを使うと動くが、ディレクトリでの読み込みは動かない場合

JavaScript の調べ物

凄いびっくりするハマりをしました。

jquery ui のsortable

$(function(){
$(function() {
$("#sortable").sortable();
});

});
を動かしたくてもうんともすんとも言わなかった時です。

html のhead タグ内に
<script  type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script  type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
と書いて動きませんでした・・・・

それはFirefox でもChrome でも
一緒の現象でした。

このsortable のjQuery のui を使いたいのに動かないのならば、
普通は
jquery-ui-1.10.4.custom.min.js
の方を疑いませんか????????????????(ここ重要!!!)

しかし、今回なぜか、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script  type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

太字にした部分、つまりjquery の所だけ、
適当なバージョンで、なんとなく外部から読み込んだのです。

それでなぜか動くので、ではjQuery 本体のJavaScirpt が壊れているとか、
何かの問題があるのだと思って、その本体をダウンロードして
ローカルに配置しました。

つまり
<script  type="text/javascript" src="js/jquery.min.js"></script>
<script  type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
と太字の部分にしたのです。

しかしなぜか・・・・動かないのです・・・・

ここでどうしようもないので、ほぼ1日迷いました^^;(久しぶりに本当に困ったw)

そこでまずネットであれこれjquery ui sortable 動かない
などgoogleで調べてみて

http://manablog.org/jquery-not-work/

なのがあったので、参考になるなぁ!と思いましてブックマークしたりしていましたが、
結局これでも動かなかったのです。

どう考えても読み込む順がおかしいのかな?などと思っていましたが、
Firefox のFirebug などのコンソールでエラー表示されないので
エラーも特定しずらく、迷っていたいのですが、
初心に戻ってhtml の記述がおかしいのか?とかdocment の指定がおかしいのか
あれこれしていて見つけたのがやはりhtml の説明でした。

http://www.tagindex.com/html_tag/elements/script.html

そこでもdefer を付け加えたり、いろいろしてダメだったので
文字コードにUTF-8 でも指定しても変わらないだろうな・・・と
思っていましたが、なんとなく指定しました。

動きました;x;(えええええええw)

つまり、
jQuery UI は、jQuery 本体のJavaScirpt の文字コードに依存して
動かない事がある!んです!!!!

結果的にui 側ではなく、本体側の文字コードをcharset="UTF-8"にしたら動いたのです。
つまり以下

<script  type="text/javascript" src="js/jquery-1.11.0.min.js"  charset="UTF-8"></script>
<script  type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

久しぶりにハマって困った事だったので記述してメモとして残しました!

お粗末です<_ _>

拍手[0回]

PR


  • 2014/06/14 02:40

コメント一覧

  • お名前
  • Email

  • コメント

  • Vodafone絵文字 i-mode絵文字 Ezweb絵文字
  • パスワード
[PR]