20736


monaca.pushPageを使いデータを次のページへ渡したいです。  
現状、jsonからデータを引張てきてそれをリスト表示させるところまではできているのですが、  
for文内にある関数(showDetail)にjsonから取得したデータをいれ、それを次のページ(詳細ページ)に飛ばすところでつまずいております。

リンクを押しても画面が一瞬真っ白になった後、また一覧ページが表示されてしまって次のページへ進まなく困っています。

どなたかご教示いただけると幸いです。  
何卒、よろしくお願い申し上げます。

↓一覧ページ↓

[code]

    <html>
      <head>
        <script>
          ons.bootstrap();
    
          document.addEventListener('deviceready', function() {
            //Ajax通信
            $.ajax({
              type: 'GET',
              url: 'http://○○○.jp/json.php',
              dataType: 'json',
              success: function(json) {
                var len = json.length;
    
                for(var i = 0; i < len; i++) {
                  $("#list").append("<div>+ json[i].title + </div>");
                  $("#list").append("<airtcle><div><a href='#' onClick='showDetail('" + json[i].movie_url + "', '" + json[i].title + "')'></a></div></article>");
                }
              },
              //下記を追加してどう言ったエラーが発生しているのか確認する
              error: function(XMLHttpRequest, textStatus, errorThrown) {
                // 省略
              }
            });
          }, false);
    
          //問題の箇所
          //jsonの読み込み完了後のfor文内にあるshowDetail()で引数を入れ下記の関数で次のdetail.htmlへデータを渡したいです。
          function showDetail(url, title) {
            monaca.pushPage("detail.html", {
              animation: 'lift',
              clearStack: false
            },
            {
              url: url,
              title: title
            });
          }
        </script>
      </head>
      <body>
        <ons-navigator title="Navigator" var="myNavigator">
          <ons-page>
            <ons-toolbar>
              <div class="center"></div>
            </ons-toolbar>
            <section id="list"></section>
          </ons-page>
        </ons-navigator>
      </body>
    </html>
    
[/code]

↓詳細ページ↓

[code]

    <html>
      <head>
        <script type="text/javascript">
          window.alert(JSON.stringify(monaca.queryParams));
          document.write("queryParams is" + JSON.stringify(monaca.queryParams));
        </script>
      </head>
      <body>
        <ons-page>
          <ons-toolbar>
            <div class="left">
              <ons-back-button>Back</ons-back-button>
            </div>
            <div class="center"></div>
          </ons-toolbar>
        </ons-page>
      </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-01-07T14:00:59.163
20720
2016-01-08T04:21:22.840
2016-01-08T04:21:22.840
13493
13775
question
javascript php monaca html5 json
一覧ページから詳細ページへデータを渡したい


これでどうでしょう？  
※検証のためにAjax部分はfor文にしています。

**index.html**

[code]

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap();
    
            document.addEventListener('deviceready',function(){
                for(var i=1; i <= 10; i++) {
                    $("#list").append('<airtcle><div><a href="#" onClick="showDetail(\'URL:' + i + '\', \'TITLE:' + i + '\')">' + i + '</a></div></article>');
                }
            },false);
    
            function showDetail(url, title) {
                // detail.htmlに遷移
                // http://ja.onsen.io/guide/overview.html#navigatorgetCurrentPage
                myNavigator.pushPage("detail.html",{
                    animation: 'lift', 
                    url : url, // 渡すデータ
                    title : title,  // 渡すデータ
                })
            }
    
            // detail.htmlのページ初期化のイベント
            // http://ja.onsen.io/guide/overview.html#Pageinitevent
            document.addEventListener("pageinit", function(e) {
                if (e.target.id == "page-detail") {
                    // 渡したデータを取得して表示
                    // http://ja.onsen.io/guide/overview.html#navigatorgetCurrentPage
                    var options = myNavigator.getCurrentPage().options;
                    $('#page-detail').find('.url').text(options.url);
                    $('#page-detail').find('.title').text(options.title);
                }
            }, false);
        </script>
    </head>
    <body>
    <ons-navigator title="Navigator" var="myNavigator">
        <ons-page>
            <ons-toolbar>
                <div class="center">Index</div>
            </ons-toolbar>
            <section id="list"></section>
        </ons-page>
    </ons-navigator>
    </body>
    
[/code]

**detail.html**

[code]

    <ons-page id="page-detail">
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Detail</div>
        </ons-toolbar>
    
        <div id="contents">
            <p>URL：<span class="url"></span></p>
            <p>TITLE：<span class="title"></span></p>
        </div>
    </ons-page>
    
[/code]


CC BY-SA 3.0
2016-01-08T04:11:07.597
20736
2016-01-08T04:11:07.597
13935
20720
answer