jQueryMobileのページ間のデータの受け渡し（クエリパラメータ）について

web制作

2013.11.082016.03.26

結論から言うとできない。正確に言うと、クエリパラメータを使って次のページにパラメータを渡せないらしい。
ページ間のデータの受け渡しはJavaScript(jQuery)で行なうとのこと。

経緯として、jQueryMobileのページで、アンカーリンク（aタグ）でページ移動する際に、データも一緒に渡したい。
通常のサイトだと、PHPにGETメソッドで渡すんだけど、jQueryMobileのページ遷移では・・・

フォームを使って無理やり渡す方法もあるけど（jQueryMobileのフォームで同html別ページへのsubmit）、今回はアンカーリンクと一緒に渡す方法を考える。

1.jQueryMobileのページ遷移について

おさらい。

jQuery Mobileにおける「ページ」は、data-role=“page” を指定されたdiv要素により構築される。
そしてこのdiv要素は、一つのファイルに複数書くことができる。

つまり、jQueryMobileでは、一つのファイルで複数のページを表示することができる。

ページ遷移する場合は、別のdiv要素をAjaxにより取得する。
仕組みとしては、head部分はそのままで、内容を表示するbody部分のみが読み込まれるのだ。

これにより、同一ファイルを参照したまま、ページが切り替わったように見える。

これをAjaxナビゲーションと呼ぶらしい。
同一のCSSやJavaScriptの再読み込みを回避でき、高速化に貢献できる。
Ajaxを使わない場合、HTTPリクエストが発生するんやと思うし・・・

本題。

「アンカーリンクでページ遷移するのと一緒にデータを渡す」

調べたらjQueryMobileではクエリパラメータを使えないとのこと（クエリパラメータとは、URLの最後につく「?id=runble1」のこと）。
データの受け渡しはJavaScriptを用いるらしい。

まずは、クリックしたリンクのID属性を取得 (1)。
それをリンク先のページにdata属性としてセットして置く (2)。

$('a[href=#input]').click(function() {
    var day_id = $(this).attr("id"); // (1)
    $('#input').data('day_id', day_id); // (2)
})

リンク先のページでデータを取得する。


$('#input').on('pagecreate', function() {
var params = $(this).data('day_id');
console.log(params);
 })

ちなみに、jQuery1.9では live ではなく on を使うことに注意。