jquery .load() function is not working under phonegap on iPad. it works in mobile safari very well. But it\'s not working in Phonegap app. Any help would be appreciated.
I tried this and it worked fine in both the Android emulator and the iOS simulator.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Remote</title>
<link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#test1').load('index2.html'); // Local Call - This is just a file in the same project called index2.html with the word "Test" in it
$('#test2').load('http://www.twitter.com/help/test.json'); // Remote call
$('#test3').load('http://www.12robots.com/index.cfm .body'); // Another remote call
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</div>
</body>
</html>
I did notice that when I tried to load an entire HTML document (including head, body, html tags) that I only got a white screen. But when I only try to load part of a document (like just a div within the body, like my third example below) it works fine. I suspect that the browser just does not like the structure:
<html>
<head>
</head>
<body>
<div>
<html>
<head>
</head>
<body>
</body>
</html>
</div>
</body>
</html>
I don't blame it, I don't like it either.
Try using a full URL.
AFAIK PhoneGap is actually served as local files. If you want to access external assets or Ajax, then include the protocol, domain and port (if necessary) in the URL.