2011-12-16 7 views
2

jQuery MobileでWebアプリケーションを作成し、Cloudmadeリーフレットを使用して地図を作成しました。このマップには、データベース内の座標から生成されたマーカーがあります。各マーカーには、アイテムの説明と、マーカーがクリックされたときにポップアップに表示されるリンクがあります。すべて正常に動作しています。リンクは、アイテムに関するデータベースからより多くの情報を要求するPHPファイルにアクセスします。jQuery MobileとCloudmadeリーフレットのリンクが機能しない

問題は、ポップアップ内のリンクをクリックしたときに、jQueryトランジションを使用してページをより多くの情報で表示する代わりに、リンクがブラウザを開いてそこにコンテンツを表示することです。

jQuery Mobileでリンクを見てクリックしたときにajaxの読み込みと移行を適用する際に問題があると推測します。

これが可能で、正しく動作させるために何が必要なのか、誰にも分かりますか?

私はjQueryのモバイルで開発し、デフォルトではjQueryのモバイルフォームは、AJAXを介してサーバへの呼び出しを行い、あなたがこのような data-ajax="false"を追加する必要があります

答えて

0

<form action="forms-sample-response.php" method="get" data-ajax="false" class="ui-body ui-body-a ui-corner-all"> 

全例:

http://jquerymobile.com/demos/1.0/docs/forms/forms-sample.html

+0

感謝の応答アレックスのために。 バブルのフォームを使用していません。HTML Aタグを使用しています。 各バブルには、サーバーからプロパティの詳細を取得し、Jquery Mobile内に詳細を表示する代わりにモバイルアプリから外してSafariブラウザを開き、詳細を表示するphpファイルへのテキストリンクがありますそこで。 – Barry

1

Barry、

あなたがする必要があるのは、目的地のjQueryモバイルリンクへの '#'リンクを含めることです。標準JQMの方法のthats - のhref = '#のinfoPage'

var popup = new L.Popup(); 
popup.setLatLng(e.latlng); 
popup.setContent("More <a href='#infoPage'>info</a> here."); 
map.openPopup(popup); 

お知らせ:

<div data-role="page" id="infoPage" data-add-back-btn="true"> 
    <header data-role="header" data-theme="c"> 
    <h1>Video tests</h1> 
    </header> 
    <div data-role="content"> 
    This is where more info would appear... 
    </div> 
</div> 

は、その後、あなたがこのようなマーカーを作成することができます。たとえば、あなたはこのようにinfoPage呼ばJQMページを持っている場合ページを切り替える あなたのためにそれを解決することを望む(私はちょうどここでそれを試してみました)

...純粋なwebappではなくPhoneGapアプリとしてあなたの 'app'を実行している場合には、リンクをクリックすると、PhoneGapは独自のWebビューではなく、ブラウザでコンテンツを起動する可能性があります。これはどこかに答えている:

Links in remote JQueryMobile sites in a PhoneGap app open safari

What controls whether PhoneGap opens an external browser/Safari?

http://forum.jquery.com/topic/phonegap-jquerymobile-ajax-links-opening-in-browser-window

open link inside the phonegap program

関連する問題