2

monacaで開発しており、index.htmlからdetail.htmlに飛んだ時に飛先のdetail.htmlでjasonを動かしたいのですが動いてる気配がなく困っています。
飛んだ際もスライドして飛び「ロード中」のようなページを読み込む感じもないのでそれでjsonが呼び出されていないのかとも色々と考えてます。
ご教示いただけると幸いです。

↓index.html↓

<script>

        function categoryItem(url,title) {
            // detail.htmlに遷移
            myNavigator.pushPage("detail.html",{
                animation: 'slideRight', 
                url : url, // 渡すデータ
                title : title,  // 渡すデータ
            })
        }

        // detail.htmlのページ初期化のイベント
        document.addEventListener("pageinit", function(e) {
            if (e.target.id == "page-detail") {
                // 渡したデータを取得して表示
                var options = myNavigator.getCurrentPage().options;
                $('#page-detail').find('.url').text(options.url);
                $('#page-detail').find('.title').text(options.title);
            }
        }, false);
    </script>

   <li><a href="#" onClick="categoryItem('×××','楽しい系')">タイトル</a></li>

↓detail.html↓

              $.ajax({
                type: 'GET',
                url: 'http://○○○.jp/json/楽しい系のjsonデータ.php',
                dataType: 'json',
                success: function(json){
                    var len = json.length;
                    for(var i=0; i < len; i++){
                        $("#list").append('<airtcle"></article>');
                    }
                }
            });
            },false);

 <body>
    <section class="load__wrap">
        <ons-navigator title="Navigator" var="myNavigator">
            <ons-page id="page-detail">
                <ons-toolbar>
                    <div class="title"></div>
                </ons-toolbar>
                <section id="list"></section>
            </ons-page>
        </ons-navigator>

    </section>
</body>
1
  • 1
    解決したのであれば、その回答を承認してください。また、ご自身で解決された場合は自己回答を追加し、後日承認してください。
    – user10259
    Commented 2016年4月13日 4:06

1 件の回答 1

1

ons-navigatorで画面遷移を行っているようですが、
遷移先の画面はiframe内に埋め込まれるので
スクリプトはindex.htmlで定義するのがよいようです。

index.html

<script>
    ons.bootstrap();

    function categoryItem(url,title) {
        // detail.htmlに遷移
        myNavigator.pushPage("detail.html",{
            animation: 'slideRight', 
            url : url, // 渡すデータ
            title : title,  // 渡すデータ
        })
    }

    // detail.htmlのページ初期化のイベント
    document.addEventListener("pageinit", function(e) {
        if (e.target.id == "page-detail") {
            // 渡したデータを取得して表示
            var options = myNavigator.getCurrentPage().options;
            $('#page-detail').find('.url').text(options.url);
            $('#page-detail').find('div.center').text(options.title);

            $.ajax({
                type: 'GET',
                url: 'http://○○○.jp/json/楽しい系のjsonデータ.php',
                dataType: 'json',
                success: function(json){
                    var len = json.length;
                    for(var i=0; i < len; i++){
                        $("#list").append('<airtcle></article>');
                    }
                }
            });
        }
    }, false);
</script>
<body>
<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        <a href="#" onClick="categoryItem('×××','楽しい系')">タイトル</a>
    </ons-page>
</ons-navigator>
</body>

detail.html

<ons-page id="page-detail">
    <ons-toolbar>
    </ons-toolbar>
    <section id="list"></section>
</ons-page>
1
  • user13314 様 この度はご教示誠にありがとうございました。 おかげで無事解決することができました。
    – kazunoko
    Commented 2016年1月16日 6:43

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。