凄いびっくりするハマりをしました。
jquery ui のsortable
$(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>
久しぶりにハマって困った事だったので記述してメモとして残しました!
お粗末です<_ _>
コメント一覧