I have an ASP.Net MVC3 application (it doesn't matter if it is ASP.NET MVC, PHP or RAILS coz in the end it is serving out plaing HTML) which is using jquery mobile and works great in all mobile browsers. The next step for me is to create a native ios app using Phonegap.
My guess is all I have to do is in the html page which I put in Phonegap, I will hook into page load event and dynamically load the contents of my MVC view from a remote server.
But I am looking for some examples if anyone else has done something similar.
-Thanks in advance Nick
UPDATE: I was able to accomplish this by writing the following index.html page. Hope it helps someone else.
STILL ISSUES THOUGH : But having done this...as you may notice I am requesting my ASP.NET MVC page via http://IP:8081 URL. This works fine and it loads my page too...but it is not jquery mobile formatted. So, if someone can help me out here, it will be great.
EXPLANATION : Since, the ajax.responseText contains the entire HTML starting from the <!DOCTYPE html> tag... I think it is pretty obvious that I end up inserting an entire HTML page inside my <div data-role="page" id="home"> tag which is obviously wrong but I don't have a solution for it yet :(
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Ajax Sample</title>
<meta name="viewport" content="width=device-width,initial-scale=1, target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript">
function onDeviceReady() {
var ajax = new XMLHttpRequest();
ajax.open("GET", "http://192.168.2.30:8081/", true);
ajax.send();
ajax.onreadystatechange = function () {
alert(ajax.status);
if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 0)) {
document.getElementById('home').innerHTML = ajax.responseText;
}
}
}
$(document).bind("mobileinit", function () {
alert('mobileinit');
// Make your jQuery Mobile framework configuration changes here!
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
document.addEventListener("deviceready", onDeviceReady, false);
</script>
</head>
<body>
<div data-role="page" id="home">
</div>
<div data-role="page" id="search">
</div>
<div data-role="page" id="recent">
</div>
</body>
</html>
