I can’t figure out why jquerymobile does not correctly display in xCode4’s i0s simulator using cordova. I reference all the script source as per my directory.
<link rel="stylesheet" type="text/css" href="/jquery/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
Full code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript">
/*default cordova code which is too long to display but it contains the onBodyLoad()*/
</script>
<link rel="stylesheet" type="text/css" href="/jquery/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.0.1.js"></script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" data-theme="a">
<div data-role="header">
<h1> Header Content </h1>
</div>
<div data-role="content">
<p> Main Page Content </p>
</div>
<div data-role="footer">
<h1> Footer Content </h1>
</div>
</div>
</body>
</html>
jQuery 1.7.2 is incompatible with jQuery Mobile 1.0.1 (read jquery 1.7.2 release notes!)
Either use js 1.7.2 with jqmobile 1.1 RC1, or
jq 1.7.1 with jq mobile 1.0.1