I am testing iUI for mobile web apps. Instead of putting all content into a single HTML page, I am using the Ajax hyperlink technique described by Joe Hewitt here. However I cannot get this to work in Chrome, although Joe Hewitt's own Digg demo, which uses the same technique, seems to work correctly.
Here is the simplified source code:
main.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="main" title="Main" selected="true">
<li><a href="screen1.html">Go to Screen #1</a></li>
<li><a href="screen2.html">Go to Screen #2</a></li>
</ul>
</body>
</html>
screen1.html:
<div class="panel" title="Screen 1">
<ul><li>Hello 1</li></ul>
</div>
screen2.html:
<div title="Screen 2">
Hello 2
</div>
This works fine on Firefox (minus styling issue in screen2.html) but the links do not work on Chrome.
Any pointers?
Looks like does not have anything to do with iUI, rather it is a Chrome issue that affects loading any local files via Ajax.
Here is another SO question related to this issue, this time showing up with JQuery:
The accepted answer includes a link to the bug in the Chromium bug tracker.