jquery mobile のページ切り替えの挙動（イラッ

とにかくajaxの挙動がおかしい！それでも使いたい！って方用にメモを残しておく。

ページ切替イベントに
http://dev.screw-axis.com/doc/jquery_mobile/api/events/page_transition/about/

pagebeforehide
pagebeforeshow
pagehide
pageshow
の４つがあると記載してあるけど、実はもう一つあって
ページ遷移先のdiv[data-role="page"]タグ内にある＜script＞タグがある。

scriptタグはページを読込んだ直後に実行されるので、
pagebeforchangeよりも早く実行される。
data-prefetchした場合は裏でajax通信した時に読込む。
これが一番の問題。

どういうことかというと、ページ切替前にscriptが解釈されてしまうので、
当然ページ切替後に反映される事はない。

リロードしたときはうまくいくのに、ページ移動だとうまく行かないっていうのは
ここが原因となっているので、
ウェジット回りのイベント処理などは、素直に

jquery mobileでイベント処理をやらない


これが対策。

jquery mobileでイベント処理をやらない

がとても重要。

  具体的には、
１．ページ切替などそういった処理はヘッダー内scriptに記述して、できるだけ
処理を入れないようにする。
２．ウェジット回りのイベントはhtml内のdiv[page]内scriptタグで記述して、
onclickタグやonchangeタグを使って呼び出すようにする。

これだけ制約すれば素直に動いてくれるはず。

jquery mobileの悪い所

ajaxをONにしてうまく使えないか試行錯誤してたらべからず集ができそうなくらい問題が出てきた。

・DOMキャッシュ機能をPOST先のページがおかしくなる。
・location.hrefだと履歴やハッシュが付かなくなって次表示するとき更新されない。
・ときどきページが巻き戻る。
・ときどきGUIが素の状態になる。
・ときどきscriptタグ内の処理がスキップする。
・ときどきブラウザがフリーズする。
・WEBアプリ側でリダイレクトするとものアウト。
・リダイレクトしちゃった場合はcontent内に正式なURLを埋め込まないとリダイレクト前のURLになる。
・contentタグ内のページ名はユニークにしないとだめ。
・ラジオボタンをクリックしたときとかchangepageでページ遷移できない。


 こんだけ問題に直面すると時間がいくらあっても足りないしストレスとカフェインの量が増えてくる。

.NETとかがものすごく洗練された開発環境だなあと思えてきた。

jquery mobileでajaxを使う。

右も左も知らないまま、jquery mobileを使ってajax通信を使って動的なページを作ろうと思ったときに陥った罠を紹介。

今日の問題テーマ
１．pageinitでsetIntervalを使って定期的にajax通信を行う仕組みを入れると、ページ切り替えた後もajax通信を行っている。
２．ページ遷移先のjavascript（pageinit部分）が処理されない。
３．jquery mobile側のページ遷移で使われてるajaxをoffにすれば解決してしまう。（悪くないがせっかくなので使いたい）
４．ページ内でajaxを使うと時々エラーが発生する。

 これくらいの内容を紹介。
ここからたんたんと書いておく。

 jquery mobileとは 　
　　基本的な部品とページ遷移するときのアニメーションなどを提供してくれるライブラリでバックエンドにはajaxが使われている。ajaxをオフにするとページ遷移時のアニメーションがしなくなるなどの制限が付く。 あと、jquery mobileを使って自分でもajax通信するときは、多重通信するとエラーが起きるのでそのへんの制御を作りこまないといけないし、ページ遷移前には通信してない状態にもっていかないとだめである。 イベントフック自体はjquery mobileに提供されているものを使うことがリファレンスでも書かれているので目を当しておくこと。

jquery mobileがajaxONだとどうなるの？
　最初に開いたページがベースとなるので、ヘッダ、ボディー共に読み込まれる。ページ遷移はajax通信でリンク先のページデータを読み込んで、ヘッダタグはスキップしてボディータグ内にある

タグで囲まれたページを読み込んで、ページを書き換えるついでにアニメーションをはさむようになる。OFFにした場合は通常のページ移動するのでページ遷移先のヘッダーとボディーを再度読み込む。

自分でもajax使う実装はどうやるの？
　ページ遷移先のDivタグ内にscriptタグを仕込んでおいてそこに自分でajax通信をするプログラムを書いてあげればよい。Divタグ内で完結するscriptタグなので、グローバル変数が他ページとかぶっても置き換わる事もないし、引き継がれない。もしグローバル変数を使うならdivタグで囲まれたページタグ以外のエリアにメモしておけばいいと思う。もし、定期タイマーでajax通信する場合は、pageshow、pagehideでタイマーのON/OFF制御してあげればアクティブなときだけ通信するようになる。ちなみにjquery mobile公式ページにある画面レイアウト作成できるのでソースをエクスポートした場合、scriptタグがdivタグの外側にはみ出してるので厳重に注意しておくこと。

ここまでで１～４の解決策は書けた。
最後に、jquery標準のreadyじゃなくpageinitを使え！ってリファレンスに書かれてるからどこの記事でもpageinitで解決って感じに書かれているけど著者の意図通りに使われてないケースをよく見かける。
そもそもpageinitを使うケースは共通の初期化を行う時くらいなもんだろう。delegateとかするときはinitで、より使うほうはページ切り替え時の処理がメインなんじゃないかなと思う。でもまあ、このあたりは必要とされる技術を適材適所に使っていればいいので、どういうイベントがあるのかは頭の隅にでも覚えておくと良いと思います。

あとは全体の実装方法なんだけど、すっきりしたやり方がまだまとまってないので今日はここまで。

jquery mobileでpageinitするときの注意点

見事にはまった。

jquery自体始めて使うので、右も左も分からない事もあるんだけども
ドキュメント通りにコピペしてもpageinitは動かない！という問題にずっぽりはまってしまった。
色々足掻いてたら解決したのでメモっておく。

まずjquery mobileは通常ajaxがONになっていて、ページ切り替え時は
ajaxで次のページを読込んでからアニメーションして画面が切り替わる仕組みになっている。
こいつが動いてると初めに読込んだscript以外は読込まない挙動っぽい。

つまり対策方法は、
　・どのページでもヘッダーに共通のスクリプトを読込むようにしておき、スクリプト内に画面の設定を記述しておく。
　・ページ切り替えるタグにパラメータで「data-ajax="false"」を付け加えておく。

この２つに絞られる。

前者のがページ切り替わる時のアニメーションが付いてお手ごろなのだが
ページ数が多くなると厄介なので、今のところはsubmitやタグのところに後者のdata-ajax=falseを入れて対応しておいた。