1. Home
  2. JavaScript

JavaScript

Firefox3.0 + Firebug1.2.0b3でフォーム入力するとJavascriptエラー

Firefox3入れてみた。早い、早すぎるよ。
まぁそれはおいといて本題。

openWYSIWYGの動作テストをしていたところ、IE6、7問題なし。Firefox2問題なし。で、Firefox3インストール後再度動作テスト。エラー。エラーエラーエラー…。 

[Exception... "'JavaScript component does not have a method named: "handleEvent"' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x80570030 (NS_ERROR_XPC_JSOBJECT_HAS_NO_FUNCTION_NAMED)" location: "<unknown>" data: no]

とか 

assignment to undeclared variable

とか。

間違ってwysiwyg.jsのソース書き換えちゃったかなと思いopenWYSIWYGを入れなおしてみたけどダメ。のおーん。。

半分諦めつつ過去に作ったサイトを見返してみるとちゃんと動作している。。と、ここで原因がわかったわけですが、つまりはローカルだとJavascriptのエラーがでるということでした。サーバにアップするとエラーは出ない。なぜかは不明。Firebugのせいかなとかも思いましたがオフってもエラーでるのね。なんだこれ。

追記

原因判明。SBMカウンタでした。SBMカウンタが有効で、ローカルファイルのフォームに入力しようとするとエラーがでるっぽい。openWYSIWYGは関係なす。とりあえずローカルでフォームまわりをテストするときはSBMカウンタはオフにするしかないようです。

jqueryでカテゴリごとにメニューの画像を切り替えるTips

全ページに共通のグローバルナビゲーションがある場合、私はphpのincludeを利用して、navi.txtとか作ってそれを全ページに使いまわすということを結構やります。
非常に便利というか、修正がある場合でも1つのファイルを修正するだけで済むという手間要らずな感じが大好きなのですが、カテゴリごとにメニューの画像を切り替えるのが面倒くさいんですよね。
例えば「about」のカテゴリーのページを開いた場合はグローバルメニューの「about」の画像のみがonになるとか。

で、それをjqueryを使って何とかならないかなと思ってやってみました。

例えばHTMLがこんな感じだったとします。メニューの画像はそれぞれ_off.gifと_on.gifの2つを用意。 

<div id="GlobalNavigation">
  <ul>
    <li class="about"><img src="images/about_off.gif" alt="about" /></li>
    <li class="gallery"><img src="images/gallery_off.gif" alt="gallery" /></li>
    <li class="link"><img src="images/link_off.gif" alt="link" /></li>
  </ul>
</div>

そして、javascriptの方が、こんな感じ。 

$(document).ready(function(){
　　//パス取得
　　path = location.pathname

　　if(path.match("/about/")){
　　　　$("#GlobalNavigation .about img").remove()
　　　　$(#GlobalNavigation .about").prepend('<img src="images/about_on.gif" alt="about" />')
　　}else if(path.match("/gallery/")){
　　　　$("#GlobalNavigation .gallery img").gallery()
　　　　$("#GlobalNavigation .gallery").prepend('<img src="images/gallery_on.gif" alt="gallery" />')
　　}else if(path.match("/link/")){
　　　　$("#GlobalNavigation .link img").remove()
　　　　$("#GlobalNavigation .link").prepend('<img src="images/link_on.gif" alt="link" />')
　　}
})

まず、path = location.pathnameで、現在開いているページのパスをpathという変数に代入します。
このとき取得できるパスは、ルート以下の部分となります。
http://2inc.org/about/index.htmlなら、/about/index.htmlという感じ。

そして、path.match(検索文字列）でpathの中に検索文字列が含まれるか調べます。
含まれていたらtrueを返すので、これをif文の条件としてそれぞれ分岐させます。

あとは、<li>のclassを目印として_off.gifの削除、そして_on.gifの挿入を行うという流れです。

ただ、このスクリプトだとメニュー項目が増えるたびにごちゃごちゃ書き加えないといけないので、手間です。
もっとオブジェクト化して引数渡すだけでチャチャッとできるようにすると使い勝手も良くなるんですが。
残念なことに私にはそこまでjavascriptの知識がありません…。

jqueryでタグを追加するTips

論理的で正しいhtmlを記述する。デザインをcssで実現しようと試みる。ダメだ、タグ（div）が足りねぇ…。
これって結構経験したことあるパターンじゃありませんか？
でもデザインのためにdivを追加するのはイヤだし、ということで、jqueryを使いhtmlをいじることなくdivを追加する方法を考えてみました。

このエントリーを読む

このページの先頭へ