0

「検索」と「結果」の2ページでシンプルなサイトを作ろうとしています。

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

次のようなものを使用できるように、クエリ文字列を介して結果ページにパラメータを渡したいと思います。

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

問題は、htmlを2つのファイルに分割すると、何も正しく機能しないように見えることです。

電話してみます

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

検索ページに表示されますが、$(document).ready関数が起動していません。changePage2番目のページをDOMにロードしているので、なぜそうならないのかわかりますか？

また、手動でリダイレクトしようとしました。この場合、$(document).ready関数はresults.htmlで起動しますが、戻るボタンを使用するか、検索ページに戻ると、それは起動しません$(document).ready。

2番目のページをロードしたときにこれが起動することを想定して、関数をsearch.htmlに接続しようとしましたpagechangeが、何も起こりませんでした。

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

4

3 に答える 3

0

入力してくれてありがとう。複数ページのレイアウトのハッシュで偽のクエリパラメータを使用できるプラグインを使用しました。

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

これを追加してページ変更時に検索を実行し、検索用のページパラメータを取得しました。

于 2012-04-21T21:35:42.510 に答える
0

私もこれに悩まされてきました。クエリ文字列を介してパラメーターを渡すことは本当に良い考えではなく、jQueryMobile が奇妙な動作をするようになります。

代わりに、完全に機能する sessionStorage を使用しています。クッキーを使用することもできます。

于 2012-04-20T18:35:31.083 に答える
0

実際にどこで問題が発生しているのかは 100% わかりませんが、jQuery Mobile 固有の重要な情報を参考にしてください。

まず、このページの上部にある黄色の大きなセクションを読んでください: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

document.readyページが外部ドキュメントから DOM に取り込まれたときは起動しません。代わりに、上記のリンクで指定されたイベント委任とページ イベントを使用する必要があります。pageinitの代わりとして使用する可能性が最も高いですdocument.ready。

次に、このページのトップ セクションを読んでください: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (についての部分$.mobile.changePage())。

$.mobile.changePage()2 番目のリンクに関する重要な部分は、次のように関数を介してデータを渡すことができるということです。

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

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

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

もう 1 つの修正方法は、手動でdata-url属性を<div data-role="page" id="results">ページに追加することです。次のようなページを取得すると:

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

次のdata-urlように設定されますresults.html?q=search+term+here。を手動で設定するdata-urlとresults.html、次のようにページに移動できます。

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

AJAX経由で疑似ページを再ロードする前に、属性が設定されdata-role="page"ている要素を最初に探します。data-urlresults.html

于 2012-04-20T20:12:25.820 に答える