Mobile Web App with data-role="page" problem with browser access to server - offline working!
Hello,
at time I am very wondering why my JQuery mobile apps are working offline without any problems in my browser - but not at the server! The files are all loaded correctly - that I have seen in firebug!
When I load the online page in any browser it shows a destructed structure with all html element of the whole html page together on a white page. The layout is not rendered with JQ mobile.
Do you know what my problem is here? Many thanks in advance!
My index.html pages always have the following structure:
<!DOCTYPE html>
<html lang="EN" manifest="cache.manifest">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="logo.png"/>
<title>mobile web app</title>
<!-- includes external stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- includes needed framework libraries -->
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<!-- includes files with classes for game objects -->
<script src="js/myapp.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div class="header" data-role="header">
<!-- header -->
<a id="buttonMenu" href="#menu" rel="external" data-role="button" data-transition="slide">Menu</a>
<h1>Title</h1>
</div>
<div class="content" data-role="content">
<!-- content -->
</div>
<div class="footer" data-role="footer">
<!-- footer -->
</div><!-- /page -->
</div>
<div id="menu" data-role="page" class="page">
<div class="header" data-role="header">
<!-- header -->
</div>
<div class="content" data-role="content">
<!-- content -->
</div>
<div class="footer" data-role="footer">
<!-- footer -->
</div><!-- /page -->
</div>
<div id="credits" data-role="page" class="page">
<div class="header" data-role=header>
<!-- header -->
</div>
<div class="content" data-role="content">
<a href="#menu" data-role="button" data-rel="back" data-theme="c">back to menu</a>
</div>
<div class="footer" data-role="footer">
<!-- footer -->
</div><!-- /page -->
</div>
</body>
</html>
My cache.manifest files have this structure:
CACHE MANIFEST
# 2013-03-02 v3
# Explicitly cached 'master entries'.
CACHE:
index.html
logo.png
js/app.js
js/jquery.mobile-1.3.0.min.js
js/jquery-1.8.2.min.js
css/jquery.mobile-1.3.0.min.css
css/style.css
css/images/ajax-loader.gif
css/images/ajax-loader.png
css/images/icons-18-black.png
css/images/icons-18-white.png
css/images/icons-36-black.png
css/images/icons-36-white.png
# Resources that require the user to be online.
#NETWORK:
# Fallback for offline access of the app.
FALLBACK:
index.html
"Ein Kritiker ist ein Mann ohne Beine, der das Laufen lehrt!" - Channing Pollock
(A critic is a man without stand who teaches going!)