0

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

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

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

↓一覧ページ↓

<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>

↓詳細ページ↓

<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>
4
  • AngularJSを使えばすぐに解決できそうに思えますが、どうでしょうか?
    – otak-lab
    2016年1月8日 2:18
  • @kazunoko 問題が解決したようで何よりです。僕は質問文を直しただけですので、AngularJSに関するコメントは oTak さんに返信されたほうが良いかと思われます。
    – a10a
    2016年1月8日 14:54
  • @oTak oTak様 この度はご教示誠にありがとうございます。 お恥ずかしながら、AngularJSの知識関しましては0に近い状態です。 AngularJSの知識があれば解決できるかもしれないのですね。 もう少し勉強してみます。
    – kazunoko
    2016年1月9日 3:26
  • @Kazma Arakaki Kazma Arakaki様 ご指摘ありがとうございます。 修正いたしました。
    – kazunoko
    2016年1月9日 3:28

1 件の回答 1

1

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

index.html

<!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>

detail.html

<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>
1
  • nikke様 この度はご教示ありがとうございます。 ご教示いただいた結果、無事詳細ページへ飛ぶことができました。 本当にありがとうございました。
    – kazunoko
    2016年1月8日 13:44

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

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