＜概要>
monacaを使ってます。一覧ページのリンクから詳細ページに遷移させる時、そのリンク一つ一つに設定しているデータを引数として渡し詳細ページにもデータを引き継ぎたいです。
<一覧ページについて>
一覧ページではjSONで吐き出したデータをリスト形式で表示させ、それぞれ異なるテキストデータ、異なるURLを設定する予定です。
そうなるように、初心者ながら考えて引数のところを動的になるよう設置しました。
javascript
1<a href='#' onClick='showDetail('" + json[i].url + "', '" + json[i].title + "')'></a>
一覧ページ
document.addEventListener('deviceready',function(){
//Ajax通信
$.ajax({
type: 'GET',
url: 'http://json/json.php',
dataType: 'json',
success: function(json){
var len = json.length;
for(var i=0; i < len; i++){
$("#list").append("<airtcle><div><a href='#' onClick='showDetail('" + json[i].url + "', '" + json[i].title + "')'></a></div></article>");
}
},
//エラー
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#list").append("XMLHttpRequest : " + XMLHttpRequest.status);
$("#list").append("textStatus : " + textStatus);
$("#list").append("errorThrown : " + errorThrown.message);
}
});
},false);
function showDetail(url, title) {
monaca.pushPage("detail.html", {}, {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">ここにjSONで取得したデータをリスト表示させます。</section>
</ons-page>
</ons-navigator>
</body>
各リストのリンクが設置できた？ところでリストをタップすると
一瞬画面が白くなり詳細ページに行かず、また一覧ページに戻ってきてしまいます。
画面遷移とデータの受け渡しでご教示いただければと思います。
何卒、よろしくお願いいたします。
詳細ページ
javascript
1 <script type="text/javascript">
2 window.alert(JSON.stringify(monaca.queryParams));
3 document.write("queryParams is" + JSON.stringify(monaca.queryParams));
4 </script>
5 </head>
6 <body>
7<ons-page>
8 <ons-toolbar>
9 <div class="left"><ons-back-button>Back</ons-back-button></div>
10 <div class="center">詳細ページ</div>
11 </ons-toolbar>
12</ons-page>
13 </body>
monaca画面遷移について
http://docs.monaca.mobi/2.9/ja/reference/monaca_api/transition/
Q&A
