2つのhtmlファイルの間でjQuery Mobileのページを変更します

Question

私は2つのページ、 "検索"と "結果"で簡単なサイトを作ろうとしています。

最初は、複数ページのテンプレートがかなりうまく機能していました。私はページを変更し、ページを変更するには結果を得るためにajaxを使用します。問題は、最初に検索ページに戻らずに結果ページをロードできるようにすることでした。

私はこのような何か持つことができるようにクエリ文字列を経由して結果ページにパラメータを渡したい：

search.html +「いくつかの検索語を」 - >results.html?q=some+search+terms

問題は、私ができることです」 htmlを2つのファイルに分割すると、何かがうまくいくように見えます。

私は、検索ページの

$.mobile.changePage("results.html?q=" + escape(search)) 

を呼び出してみてください、しかし$(document).ready機能は、焼成されていません。 changePageがDOMに2番目のページをロードしているので、私はなぜそうではないのですか？

また、$(document).ready関数はresults.htmlで起動しますが、戻るボタンを使用するか、検索ページに戻ると、$(document).readyが発生しません。

pagechange関数をsearch.htmlに配線してみましたが、2番目のページを読み込んだときにこれが発生すると仮定しても何も起こりませんでした。

私はこれをどのようにプルするかについての提案は誰かありますか？または、結果ページを検索ページからより独立させるための最良の方法は？

Answer 1

入力ユーザーに感謝します。私は複数のページのレイアウトのためにハッシュでfaux-queryパラメータを使用できるようにするプラグインを使用しました。

https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params

私はこの中に追加して、検索のためのそれらのページパラメータを取得し、ページ変更の検索を実行しました。

Answer 2

私もこれに噛みましたが、実際にはクエリ文字列でパラメータを渡すのは良い考えではなく、jQueryMobileは奇妙な動作をします。

代わりに私は完全に動作するsessionStorageを使用しています。また、クッキーを使用することもできます。

Answer 3

実際に問題が発生している場所は100％確信していませんが、ここでは重要なjQuery Mobile固有の情報があります。

まず、このページの上部に大きな黄色のセクションをお読みください。ページは、外部文書からDOMに持ち込まれたとき

document.readyhttp://jquerymobile.com/demos/1.1.0/docs/api/events.htmlは発生しません。代わりに、イベント委任と上記のリンクで指定されたページイベントを使用する必要があります。ほとんどの場合、document.readyの代わりにpageinitを使用します。

このページの一番上の部分を読んでください：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html（約$.mobile.changePage()の部分）。

第2のリンクについての重要な部分は、あなたがそうのよう$.mobile.changePage()機能を介してデータを渡すことができるということです。

$.mobile.changePage('results.html', { data : { q : search } }); 

あなたもpostにtypeオプションを設定することができますので、送信されたクエリ文字列がありません。 （これにより、一度にDOMの同じページが複数取得されないようにする必要があります）。

$.mobile.changePage('results.html', { data : { q : search }, type : 'post' }); 

別の修正は手動で<div data-role="page" id="results">ページへdata-url属性を追加することです。あなたはこのようなページつかむとき：

$.mobile.changePage("results.html?q=search+term+here"); 

をそれはdata-urlだに設定されます：results.html?q=search+term+here。手動results.htmlからdata-urlを設定した場合、あなたは次のようにページに移動することができます

$.mobile.changePage("results.html", { data : { q : 'search+term+here' } }); 

を経由して、擬似ページを再ロードする前にresults.htmlに設定data-url属性を持つdata-role="page"要素の最初になりますどのAJAX。