0

JSON を使用してデータベース データを取得するモバイル アプリを開発しています。Mac ブラウザーを使用して、要求されたデータとアラートを取得し、新しいモバイル ページに表示できます。ipad や iPhone のサファリでは動作しません。ページは読み込まれますが、データがありません。

ヒントをいただければ幸いです。

HTMLコード

<!DOCTYPE HTML>
<html>
<head>
 <title>tourmap_main.jpg</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
<script src="js/treedetails14.js"></script><div data-role="page" id="firstpage" data-theme="a">
<div data-role="header" data-position="fixed">
        <h1>Winter Hill Garden Tour</h1>

</div>
<div data-role="content" id="mainpage" data-theme="a">
    <div id="area1Button"><a href="#area1" data-role="button" data-   transition="flip">AREA 1</a>
    </div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</div>
<div data-role="page" id="area1" data-add-back-btn="true" data-theme="a">
<div data-role="header" data-position="fixed">
        <h1>Garden Tour - Area 1</h1>

</div>
<div id="area1content" data-role="content">
    <div id="tree105" class="treebutton"><a href="#detailsPage" data-rel="page" data-role="button" data-transition="slide" data-id="27" class="treelink">Button 1</a>
    </div>
    <div id="tree106" class="treebutton"><a href="#detailsPage" data-rel="page" data-role="button" data-transition="slide" data-id="32" class="treelink">Button 2</a>
    </div>
</div>
</div>
<div data-role="page" id="detailsPage" data-overlay-theme="a">
<div data-role="header" data-add-back-btn="true">
    <h1 align="left"><span>Tree information -</span> <span id="treetitle"></span></h1>
</div>
<div id="treeDetails" data-role="content">
    <div id="treedescription"></div>
</div>
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</div>

そして私のスクリプト：

$(document).on('pagebeforeshow', '#firstpage', function(){ 
$('.treelink').live('click', function(){
    var serviceURL = "http://winterhill.com.au/gardentour/services/";
    currentId = $(this).attr('data-id');
    $.getJSON(serviceURL + 'gettree.php?id='+currentId, function(data) {
        var tree = data.item;
        alert(tree.tree_description);
        $('#detailsPage').append("<p>item1="+tree.tree_description +"</p>");
    });
});
});

基本的なコードのセットアップは次のとおりです: http://jsfiddle.net/VgxnQ/1/

4

1 に答える 1

0 
Try this code:

$('#area1').on('pagebeforeshow', function () {
    $('.treelink').on('click', function () {

        currentId = $(this).attr("data-id");

        window.sessionStorage.setItem("IdKey", currentId);

        $.mobile.changePage( "#detailsPage", 
                             { reverse: false, 
                               changeHash: false 
                             });    

    });
});

$('#detailsPage').on('pagebeforeshow', function () {

    currentId = window.sessionStorage.getItem("IdKey");

     var serviceURL = "http://winterhill.com.au/gardentour/services/";

    $.getJSON(serviceURL + 'gettree.php?id=' + currentId, function (data) {
            var tree = data.item;     
            $('#treedescription').text(tree.tree_description);
        });

});

それでも、JSONP を有効にするか、Web サービスにアクセスするすべてのドメインを許可する設定を有効にするかのいずれかで、サーバー レベルで解決する必要がある Access allow origin の問題があります。

于 2013-07-23T04:24:51.777 に答える