0

index.html の検索ボタンをクリックすると、データを読み込んで別のページに移動しようとしています。

これは私の検索ボタンです

 <a href="results.html" data-role="button" data-icon="search"
 data-iconpos="notext">search</a>

読み込み中に、ページでこの関数を実行してデータを取得したい

      $(function () { $.getJSON("API.php", {
         command: "getBusiness",
         orig_lat: myPos.lat,
         orig_long: myPos.lon, 
         distance: 0.05 },

      function (result) { 
         $("#locations").html("");
         for (var i = 0; i < result.length; i++) {
            $("<a href='business.html?ID=" + result[i].id + "&bsnName=" + "'>
            <div>" + result[i].bsnName + " " + (parseInt(result[i].distance * 1000))
            "</div></a>").appendTo("#locations");}});});

リフレッシュを押したときにのみ、DBなしでページがロードされ、結果が表示されます

ここで何が問題なのかわかりません。getJSON を使用しない方がよいのでしょうか?? .Ajax() について話している人を見たことがありますが、それは getJSON() と同じですか?

別のページに移動し、同時にDBからjquerymobileにロードするページにデータを取得する方法について、より良いアイデアはありますか?

onclickを使用して同じ機能を使用しようとしましたが、divを指定すると機能しました

残りの頭

 <link rel="stylesheet" href="styles/jquery.mobile.structure-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/jquery.mobile.theme-1.1.0.min.css" />
    <link rel="stylesheet" href="styles/my.css" />
    <script src="scripts/jquery-1.7.2.min.js"></script>
    <script src="scripts/jquery.mobile-1.1.0.min.js"></script>
    <script src="scripts/cordova-1.8.1.js"></script>

        <script>

            // Wait for Cordova to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            var watchID = null;
            var myPos = { lat: 32.0791, lon: 34.8156 };

            // Cordova is ready
            //
            function onDeviceReady() {
                // Throw an error if no update is received every 30 seconds
                var options = { timeout: 10000 };
                watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
            }

            // onSuccess Geolocation
            //
            function onSuccess(position) {
                var element = document.getElementById('geolocation');
                //myPos.lat=position.coords.latitude;
                //myPos.lon=position.coords.longitude;     

                element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                            'Longitude: ' + position.coords.longitude + '<br />' +
                            '<hr />' + element.innerHTML;
            }

            // onError Callback receives a PositionError object
            //
            function onError(error) {
                alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
            }
4

1 に答える 1

0

基本的に、jQuery モバイルが最初またはインデックス ページをロードすると、ヘッド セクション全体 (Javascript、CSS など) とボディ セクションがロードされます。ただし、ユーザーが jQuery Mobile 駆動型サイトのリンクをクリックすると、ナビゲーション システムのデフォルトの動作は、そのリンクの href を使用して Ajax リクエストを作成することです (ページ全体の読み込みでその href を要求するブラウザーのデフォルトのリンク動作を許可するのではなく)その Ajax リクエストが送信されると、フレームワークはテキスト コンテンツ全体を受け取りますが、レスポンスの body 要素のコンテンツのみを挿入します。

この問題には複数の解決策があります。

  • jQuery Mobile サイトを構築する際の最も簡単な方法は、すべてのページのヘッドで同じスタイルシートとスクリプトのセットを参照することです。

  • リンクで属性 data-ajax="false" を使用して Ajax なしでリンクすると、この属性は ajax とアニメーションなしで次のページをロードするため、head セクションと body セクションの両方がロードされます。

  • 特定のページに特定のスクリプトまたはスタイルをロードする必要がある場合は、ロジックを pageInit にバインドすることをお勧めします。たとえば、"#aboutPage" は id="aboutPage" 属性です。

     $( document ).delegate("#aboutPage", "pageinit", function() {
   //you can place your getJson script here. that will execute when page loads 
   alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
 });

したがって、あなたの場合、より良い解決策は、ajax 呼び出しまたは他の特定のスクリプトを pageinit イベントにバインドすることです。

jQuery Mobile ドキュメントのこれらのページからヘルプを得ることができます。

http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

http://jquerymobile.com/demos/1.1.0/docs/pages/page-scripting.html

于 2012-07-07T17:23:56.263 に答える