Home/ Questions/Q 8001267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T16:03:00+00:00

I have an ASP.Net MVC3 application (it doesn’t matter if it is ASP.NET MVC,

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0