jQuery Mobile：あるページから別のページへデータを受け渡す方法

jQuery Mobile：あるページから別のページへデータを受け渡す方法

jQuery Mobileでは、URLにクエリパラメータを付加することで、ページ間で値を受け渡すことができます。本記事では、最も基本的な実装方法をサンプルコード付きで解説します。

1. リンクにパラメータを付加する

まず、値を渡したい側のページに、以下のような<a>タグを用意します。リンク先はnew.htmlとし、クエリ文字列として「structure='123'」を指定します。

<a href="new.html?structure='123'">Structure</a>

2. 受け取り側のページでパラメータを取得する

次に、受け取り側のページで、pageinitイベントを利用してURLからパラメータを抽出します。JavaScriptのコードは以下の通りです。

$( document ).on( "pageinit", "#new", function( event ) {
    var myParam = $(this).data("url").split("?")[1];
    myParam = myParam.replace("structure=", "");
    alert(myParam);
});

コードの解説

このコードの処理の流れは以下の通りです。

• pageinitイベント：ページが初期化されたタイミングで処理を実行します。jQuery MobileではAjaxによるページ遷移が行われるため、通常のreadyイベントではなくpageinitを使うのがポイントです。
• $(this).data("url")：遷移元のURL（クエリ文字列を含む）を取得します。
• split("?")[1]：URLを「?」で分割し、クエリ文字列部分（structure='123'）を取り出します。
• replace()：「structure=」という不要な接頭辞を削除し、値のみ（'123'）を抽出します。

これにより、アラートに受け渡された値「123」が表示されます。この手法を応用すれば、一覧画面から詳細画面へのID受け渡しなど、さまざまなシーンで活用できます。なお、複数のパラメータを扱う場合は「&」で区切って渡し、split("&")で分解するとよいでしょう。