Passing data between pages html5

Question

I'm currently upgrading a mobile website I have to Html5/php, before I had a lot of different php pages but now I'm using a single html5/php page.

On the old site I would pass variables via the url and use $_GET to retrieve them, although I'm struggling to work out an easy alternative in html5.

I am using Jquery mobile in my new site also, although I'm unfamiliar with it.

An example of my html is as follows.

<div data-role="page" data-title="Page One" id="home">
         <div data-position="fixed" data-role="header">
         <h1>Pageone</h1>
    </div>

  <div data-role="content" data-theme="a">
    <ul class="menu">
        <li class="icn_browse"><a href="#browse?wtd=10">Browse</a><span></span></li>

           </ul>
        </div>
    </div>



  <div data-role="page" data-title="Page two" id="browse">
         <div data-position="fixed" data-role="header">
         <h1>Pagetwo</h1>
    </div>

  <div data-role="content" data-theme="a">

<!-- need to access the data from the home page here, more specifically the content of $_GET['wtd'] -->

        </div>
    </div>

So I need to pass data from #home to #browse, Any help would be appreciated.

Answer 1

Ugly, but certainly working solution includes building a small, PHP-generated JavaScript snippet to handle this task:

Please put it AFTER the content you wish to be available when script runs (in the most cases it'll be the end of file. Another solution involves wrapping this script with $(document).ready(function() { //... })) block:

// Assuming your $_GET['wtd'] contains only an ID to fetch, without '#':
var p = "<?php echo $_GET['wtd']; ?>";
$("#"+p).prepend($("[data-role='content']");

Although I discourage the use of JavaScript this way. It violates the rule of the unobtrustive JS . Basically, this solution relies completely on the JavaScript, so it won't work in JavaScript-disabled environments (like most intranets).

Possibly better solution, without using JavaScript, but only PHP is to parse the whole site in an SGML parser and move certain nodes of the document to its right places, then serializing the document again. Perhaps you'll lose readability of your document, but it'll definitely work. It's way more complicated than this solution using jQuery, but if you're interested, I would recommend read the manual od DOMDocument class available in PHP standard library: http://nl.php.net/manual/en/class.domdocument.php .