Why don't I see my scaling anymore when using jqm?

Why don't I see my scaling anymore when using jqm?

Spend 2 whole evenings now, am not seeing where I go wrong: When navigating from my main page to a dialog and back I lose control over elements on screen. What am I doing wrong?

My -stripped- code looks like this (test.php):

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

<script type="text/javascript">

var old = 100;

function scaleTable() {
if (old == 100) {
document.getElementById('tableData').style.fontSize = '50%';
old = 50;
} else {
document.getElementById('tableData').style.fontSize = '100%';
old = 100;
}






}

</script>

</head>
<body>

<div data-role=page id=home>

<div data-role=header>
<h1>Home</h1>
</div>

<div data-role=content>

<?php
$lname = $_REQUEST["lname"];
$lname= utf8_decode ($lname);
echo '<p>Last name : ' . $lname . '</p>';
?>



<table id="tableData" border=1>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<button onclick="scaleTable()">toggle scale</button>
<a href="#dlg"> Goto dialog</a>
<br>
</div>














</div>

<div data-role=dialog id=dlg data-add-back-btn=true>

<div data-role=header>
<h1>Dialog</h1>
</div>

<div data-role=content>
<p> Dialog content</p>
<form name="f" action="" method="GET">
<input type="submit" name="lname" value="Lastname 1"/>
<input type="submit" name="lname" value="Lastname 2"/>
<input type="submit" name="lname" value="Lastname 3"/>
</form>
</div>






</div>

</body>
</html>

When I run this code the last name is empty (of course, as the url is without any parameter), pressing the toggle button makes the table scale between 50% and back to 100%. Everything just like I expect.

Now I click 'goto dialog', get the dialog window with 3 buttons. When I press any of the 3 buttons I go back to the main page, see the last name selected now visible above the table (php parses the parameter as expected), but here's the problem: the "toggle scale" button no longer makes the table scale. I don't get this... where am I going wrong?

What I tried:

  • If I don't include jquery.mobile-1.1.1.min.js then I keep control, scale toggling works (I can hide/unhide the relevant parts, do my own styling, but like what jqm does for me on that account...)
  • If I come back from the dialog using the back button, all is well, I have control over the table scaling. But I want the parameter in the url, because I want people to bookmark using their own name
  • If I look at the url in the browser I see http://<myserver>/test.php#/test.php?lname=Lastname+1 Now if I edit that to http://<myserver>/test.php?lname=Lastname+1 then all is well, I have control over the table scaling. Going back to the url http://<myserver>/test.php#/test.php?lname=Lastname+1 and I can't toggle the scaling... Can't find a way to get the dialog window to send back the url without the hash, but with the parameter, sigh.

I've searched the web, this forum, for getting jqm to lose the hash in the url, anything explaining the behaior I observe, but no luck...
Appreciate your help in giving me back my control over my table after selecting a name in the dialog.

Kind regards, Kurantje