CODEWITHSUNDEEP
asp.netruby-on-railsasp.net-mvc-3jquery-mobilecordova
StackThis
StackThis

Reputation: 1252

ASP.Net/Ruby/PHP MVC Website, jQuery Mobile and Phonegap

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>

Upvotes: 3

Views: 2160

Answers (2)

Adam
Adam

Reputation: 168

Why not use jQuery helpers to load the page from the remote server.

$(document).bind("mobileinit", function () {
     alert('mobileinit');
     // Make your jQuery Mobile framework configuration changes here!
     $.support.cors = true;
     $.mobile.allowCrossDomainPages = true;
     $("#home").load('http://192.168.2.30:8081/ #targetContent');
});

the load method can make a request and replace the contents of the selector with the results from the ajax request. It also allows you to provide a selector after the URL which will target specific content from the remote server you want to load into the original matched selector.

Upvotes: 3

j0aqu1n
j0aqu1n

Reputation: 1021

As I understand it, in broad terms, you have two options with PhoneGap (I haven't tried them myself. Right now I am learning about them):

  1. You install PhoneGap in your iOS dev enviromment and it allows you to generate a native iOS app right from the IDE
  2. In PhoneGap web site you upload your web application and they generate your iOS (or Android) app binary.

Upvotes: 0

Related Questions