一覧ページから詳細ページへデータを渡したい
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>