jquery mobile app losses formatting when loaded to Android
I have created a simple test application in Dreamweaver 5.5 with a template (PhoneGap), it works with the Live Code button in Dreamweaver and it works within a standard computer browser, but it losses all its formatting when I load it to the mobile device. It displays as 1 long page, with no formatting, help. What am I missing.
Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to cordova.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/cordova.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Property Search</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Address Search</a></li>
<li><a href="#page3">Owner Search</a></li>
<li><a href="#page4">Property ID Search</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Address Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput">Street Address</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput2">City</label>
<input type="text" name="textinput2" id="textinput2" value="" />
</div>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">State</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">AL</option>
<option value="option2">AK</option>
<option value="option3">AZ</option>
<option value="option1">AR</option>
<option value="option2">CA</option>
<option value="option3">CO</option>
<option value="option1">CT</option>
<option value="option2">DE</option>
<option value="option3">FL</option>
<option value="option1">GA</option>
<option value="option2">HI</option>
<option value="option3">ID</option>
<option value="option1">IL</option>
<option value="option2">IN</option>
<option value="option3">IA</option>
<option value="option1">KS</option>
<option value="option2">KY</option>
<option value="option3">LA</option>
<option value="option1">ME</option>
<option value="option2">MD</option>
<option value="option3">MA</option>
<option value="option1">MI</option>
<option value="option2">MN</option>
<option value="option3">MS</option>
<option value="option1">MO</option>
<option value="option2">MT</option>
<option value="option3">NE</option>
<option value="option1">NV</option>
<option value="option2">NH</option>
<option value="option3">NJ</option>
<option value="option1">NM</option>
<option value="option2">NY</option>
<option value="option3">NC</option>
<option value="option1">ND</option>
<option value="option2">OH</option>
<option value="option3">OK</option>
<option value="option1">OR</option>
<option value="option2">PA</option>
<option value="option3">RI</option>
<option value="option1">SC</option>
<option value="option2">SD</option>
<option value="option3">TN</option>
<option value="option1">TX</option>
<option value="option2">UT</option>
<option value="option3">VT</option>
<option value="option1">VA</option>
<option value="option2">WA</option>
<option value="option3">WV</option>
<option value="option2">WI</option>
<option value="option3">WY</option>
</select>
</div>
<a href="#page5" data-role="button">Submit</a>Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Owner Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput3">Last Name</label>
<input type="text" name="textinput3" id="textinput3" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput4">First Name</label>
<input type="text" name="textinput4" id="textinput4" value="" />
</div>
<a href="#page5" data-role="button">Submit</a>
Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Prop ID Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput5">Property ID Number</label>
<input type="text" name="textinput5" id="textinput5" value="" />
</div>
<a href="#page5" data-role="button">Submit</a> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<h3>Owner Name: </h3>
<p>Bill Johnson </p>
<h3>Address: </h3>
<p>1501 Parks Road, Rochester, Michigan 48363 </p>
<h3>Tax ID #: </h3>
<p>12-44-128-049 </p>
<h3>Brief Legal Description: </h3>
<p>Lot 25, Summerview Subdivision as recorded in Oakland County Register of Deeds Plat 45, book 23.</p>
<a href="#page6" data-role="button">Submit Title Order</a> </div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page6">
<div data-role="header">
<h1>Order Summary</h1>
</div>
<div data-role="content">Your Order has been submitted to your local Title Branch, a Confirmation email will be sent to you shortly.</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.0a3.min.
<script src="jquery-1.5.min.js" type="text/javascript"></
<script src="jquery.mobile-1.0a3.min.
<!-- This reference to cordova.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/cordova.js" type="text/javascript"></
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Property Search</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Address Search</a></li>
<li><a href="#page3">Owner Search</a></li>
<li><a href="#page4">Property ID Search</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Address Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput">Street Address</label>
<input type="text" name="textinput" id="textinput" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput2">City</label>
<input type="text" name="textinput2" id="textinput2" value="" />
</div>
<div data-role="fieldcontain">
<label for="selectmenu" class="select">State</label>
<select name="selectmenu" id="selectmenu">
<option value="option1">AL</option>
<option value="option2">AK</option>
<option value="option3">AZ</option>
<option value="option1">AR</option>
<option value="option2">CA</option>
<option value="option3">CO</option>
<option value="option1">CT</option>
<option value="option2">DE</option>
<option value="option3">FL</option>
<option value="option1">GA</option>
<option value="option2">HI</option>
<option value="option3">ID</option>
<option value="option1">IL</option>
<option value="option2">IN</option>
<option value="option3">IA</option>
<option value="option1">KS</option>
<option value="option2">KY</option>
<option value="option3">LA</option>
<option value="option1">ME</option>
<option value="option2">MD</option>
<option value="option3">MA</option>
<option value="option1">MI</option>
<option value="option2">MN</option>
<option value="option3">MS</option>
<option value="option1">MO</option>
<option value="option2">MT</option>
<option value="option3">NE</option>
<option value="option1">NV</option>
<option value="option2">NH</option>
<option value="option3">NJ</option>
<option value="option1">NM</option>
<option value="option2">NY</option>
<option value="option3">NC</option>
<option value="option1">ND</option>
<option value="option2">OH</option>
<option value="option3">OK</option>
<option value="option1">OR</option>
<option value="option2">PA</option>
<option value="option3">RI</option>
<option value="option1">SC</option>
<option value="option2">SD</option>
<option value="option3">TN</option>
<option value="option1">TX</option>
<option value="option2">UT</option>
<option value="option3">VT</option>
<option value="option1">VA</option>
<option value="option2">WA</option>
<option value="option3">WV</option>
<option value="option2">WI</option>
<option value="option3">WY</option>
</select>
</div>
<a href="#page5" data-role="button">Submit</a>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>Owner Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput3">Last Name</label>
<input type="text" name="textinput3" id="textinput3" value="" />
</div>
<div data-role="fieldcontain">
<label for="textinput4">First Name</label>
<input type="text" name="textinput4" id="textinput4" value="" />
</div>
<a href="#page5" data-role="button">Submit</a>
Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>Prop ID Search</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput5">Property ID Number</label>
<input type="text" name="textinput5" id="textinput5" value="" />
</div>
<a href="#page5" data-role="button">Submit</a> Content </div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="page5">
<div data-role="header">
<h1>Results</h1>
</div>
<div data-role="content">
<h3>Owner Name: </h3>
<p>Bill Johnson </p>
<h3>Address: </h3>
<p>1501 Parks Road, Rochester, Michigan 48363 </p>
<h3>Tax ID #: </h3>
<p>12-44-128-049 </p>
<h3>Brief Legal Description: </h3>
<p>Lot 25, Summerview Subdivision as recorded in Oakland County Register of Deeds Plat 45, book 23.</p>
<a href="#page6" data-role="button">Submit Title Order</a> </div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role="page" id="page6">
<div data-role="header">
<h1>Order Summary</h1>
</div>
<div data-role="content">Your Order has been submitted to your local Title Branch, a Confirmation email will be sent to you shortly.</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Topic Participants
chbuschiii
jtara-jquery