2011-06-26 9 views
3

私は、業績のページと結果をさらに検索/フィルタリングできるフォームを表示することによって機能するビジネス検索ページを主な特徴とするレールアプリケーションを開発しました。最近、私は次のセットアップでのjQuery Mobileを使用して、このアプリケーションへのモバイルインターフェースを実装しているjQuery間違ったページをリクエストしているモバイルとアンカーリンク

業務結果のページは、「ページ」のデータ役割を持つ2つのdivのを持っていることです。最初のページは、ユーザーが訪問時に見る実際のページです.2番目のjQuery MobileページにはHTML ID「search-form」があり、結果をフィルタリングするのに必要なフォームフィールドが含まれています。

最初のページのヘッダーバーには、#search-formとリンクするボタンがあり、ダイアログボックスのdata-relを使用します。

誰かがsite.com/businessesに直接アクセスしてリンクをクリックした場合、jQuery Mobileは適切にsite.com/businesses#search-formをモーダルダイアログにロードし、ワームは動作しますが、他のページでセッションをブラウズすると、ダイアログには常に元のページの内容が含まれます。

たとえば、site.com/someotherpageでサイトにアクセスして何らかの形でsite.com/someotherpage#/businessesに移動し、フィルタボタンをクリックすると、jQuery Mobileは間違ってsite.comというコンテンツをダイアログに要求して入力します/ someotherpage#検索フォーム

私は実際にハードコードに#検索フォームから#検索フォームと何も動作しますと、現在のページへの完全絶対パスをフィルタリンクを変更しようとしました。

ありがとうございます、私はこの1つに夢中になります!モバイル版の導入を妨げるのは私の唯一の問題です。

+0

質問を編集してコードを追加できますか?多分HTMLのページですか? –

答えて

0

私はこの同じ問題があります。 #thirdPageに配置されたボタンはjQueryによってうまく整えられますが、ユーザーがロードした最初のページからポップアップを作成します。また、ダイアログの戻るボタンは、その最初のページを指し示します。 (下記のように)

ワンボタン静的ページにロードされますが、同じことは、動的に私がpagebeforecreateイベントを経由して挿入されたボタンを作成するために適用されます。

私はすべてのポップアップはユーザーが到着最初のページのHTMLファイルに配置する必要があることを考え始めました。しかし、それは助けにならず、むしろ厄介なことになります。

ところで、デスクトップでChromeでテストするとうまく動作します。私のAndroid上でしか問題は起こらない。しかし、それは先に述べた同じ理由で最も可能性が高いです:Android上で私はページ1と2を経由して到着します、一方、Chromeで私は、3ページ自体をロードします。

もう一つの特色は、デスクトップ上のChromeでテストしたとき、私は#thirdPageに添付pagebeforecreate()イベントはダイアログが#thirdPage要素の外に完全であり、任意のカスタムイベントを持っていないにもかかわらず、再びと呼ばれているということです私によって添付されました。 pagebeforecreate()へのこの2番目の呼び出しは、Androidでは発生しません。

もう一つ面白いことに、これらの問題のあるHTMLページにはhtmlで終わらないhref属性を持つjQueryMobileによって< base>要素が与えられています。他のすべてのページは最後に ".html"を取得します。奇妙な。

<html> 
    <body> 
     <div id="thirdPage" data-role="page" data-url="third"> 
     <a href="#desiredPopup" data-role="button" data-rel="dialog" data-transition="pop">Give me the popup</a> 
     </div> 
     <div id="desiredPopup" data-role="dialog" data-url="purchase" tabindex="0"> 
     <a href="#thirdPage" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "three"</a> 
     </div> 
    <body> 
    <html> 
関連する問題