本日はAjaxな話題。
iPhone用のユーザインタフェースを作るうえで引っかかったバグ。
普通にしてると、時々うまく行ったりするからたちが悪いバグだったりする。
AjaxはもちろんJavaScriptを使うわけですが、JavaScript未対応だったり、JavaScriptを切っているときは普通にページを移動したい。というときのお話。
例えば、検索結果のページで[next]というボタンがあったとする。
JavaScritp対応の時はAjaxで次のページを取得して、スライドするアニメーションで表示させたい。JavaScript未対応の時は、普通に次のページへ飛ばしたい。
というような感じ。
そこで、エレメントのonClickのイベントハンドラーなんかにコレを書くわけだ。
e.preventDefault(); //e:eventオブジェクト
こうすることで、本来クリックすることでおきるはずのイベントをキャンセルできるというわけですね。
でまぁ、気をつけるほどのことでもないですが、この処理は関数の一番最初に記述しないといろいろ問題になるっぽいです。
他の処理をしてからe.preventDefault();を実行すると、少しでも処理が遅れると普通に本来の処理を実行し始めてしまいます。aタグをクリックしたら次のページを開こうとしちゃうわけですね。
しかし、開かれなければe.preventDefault();が実行された瞬間にキャンセルされるみたいです。なんか別に問題なさそうですね。
Ajaxを使わなければ。
Ajaxを使うと、真っ先にe.preventDefault();を実行しないとaタグのhrefプロパティに指定されたURLに接続しようとしてしまいます。この時点でpostしちゃってるので、この後Ajaxでpost使用とするとDouble postとしてエラーになるっぽいです。
皆さんもAjaxを使うときは気をつけましょう。
まぁ、僕くらいかもしれませんが。こんなミスorz
