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

結論から言うとできない。正確に言うと、クエリパラメータを使って次のページにパラメータを渡せないらしい。
ページ間のデータの受け渡しは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リクエストが発生するんやと思うし・・・

2.jQueryMobileで別ページへデータを渡すには

本題。

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

調べたら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 を使うことに注意。

参考

jQuery Mobileによるアプリケーション開発 | JavaScript | Developers AppKitBox

jQuery Mobileを使う動的ページにJavaScriptのオブジェクトを渡す – tail -f /var/log/jhoshina.log

オデの日記@WEB系: jQueryでクリックされたエレメントの属性を取得する

jQuery 1.9に移行してハマったこと | ログろいど

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad