Geek asks and answers

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

I have an ASP.Net MVC3 application (no matter whether it is ASP.NET MVC, PHP or RAILS coz, after all, it serves to host HTML), which uses jquery mobile and works fine in all mobile browsers. The next step for me is to create a native ios application using Phonegap.

My guess is all I have to do is on the html page that I installed in Phonegap, I will connect to the page load event and dynamically load the contents of my MVC view from a remote server.

But I am looking for a few examples if someone has done something similar.

-Thank you in advance Nick

UPDATE: I was able to accomplish this by writing the following index.html page. Hope this helps someone else.

ALL ISSUES OF THOUGHT : but by doing this ... as you can see, I request 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 here, it will be great.

EXPLANATION: Since it ajax.responseTextcontains all the HTML, starting with the tag <!DOCTYPE html>... I think it’s pretty obvious that in the end I insert the whole HTML page inside my own <div data-role="page" id="home">, which is clearly wrong, but I have no solution 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>
+3
source share
2 answers

Why not use jQuery helpers to load a page from a 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');
});

load ajax. URL-, , , .

+3

, PhoneGap ( . ):

  • PhoneGap iOS- iOS IDE
  • - PhoneGap -, iOS ( Android).
0

More articles:


All Articles