0

Building my first webapp with jQuery Mobile - this will need to work with PhoneGap eventually so I'm trying to keep it simple. Problem is I'm trying to load remote content from a webserver using $.ajax and I'm not getting a response.

Code (slightly truncated for ease of reading)

<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no,target-densitydpi=device-dpi;" />

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>     
<link rel="stylesheet" href="scripts/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="themes/apptheme.min.css" />
<link rel="stylesheet" href="styles/mobilestyle.css" type="text/css" media="screen" />
<link rel="stylesheet" href="styles/mobilesitetyle.css" type="text/css" media="screen" />
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/jquery.mobile-1.1.1.min.js"></script>
<script src="scripts/jquery.url.js"></script>

<script type="text/javascript">
    $(document).bind("pagebeforechange", function (e, data) {
        // We only want to handle changePage() calls where the caller is
        // asking us to load a page by URL.

        if (typeof data.toPage === "string") {
            // We are being asked to load a page by URL, but we only
            // want to handle URLs that request the data for a specific
            // category.

            var u = $.mobile.path.parseUrl(data.toPage);

            var re = /^#productList/;
            if (u.hash.search(re) !== -1) {
                $.ajax({
                    url: "http://myproductwebsite/products.aspx",
                    datatype: "html",
                    success: function (data) {
                        $('.submenu').html(data);
                        alert('Load was performed.');
                    }
                });
            }

        }
    });

</script>
</head>
<body>
<div style="width:100%;font-size:13px;" data-role="page" id="home">
    <div data-role="header" data-position="fixed">          
        <h1>Home</h1>            
    </div>
    <div data-role="content" class="submenu">
        <a href="#productList" data-transition="slide"><img src="images/Icon-Products.png" alt="products" /></a>                
    </div>
    <div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"></div>
</div>

<div data-role="page" data-theme="a" id="productList" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">          
        <h1>Products</h1>            
    </div><!-- /header -->
    <div data-role="content" class="submenu">product content    
        <!-- content gets put in here -->
    </div><!-- /content -->
    <div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"></div>
</div><!-- /page -->
</body>
</html>

Basically, passing a link with a hash, picking it up and trying to load content in from a remote webserver. This is the bit that doesn't show any content - I can confirm that the url I'm using definitely displays HTML, so I should be able to pick it up and inject it.

The alert in the success event doesn't fire, but if I put alerts either side of the ajax code they fire ok so it's just passing through the middle.

I've had success with this code using .load() on a localhost setup but as soon as I've moved the content data out remotely and switched to ajax it has stopped working. Is there a way to do this with .load()? I liked the way you can just request a div out of the response with that.

Am I missing something simple? The content from the server will just be simple HTML pages of content from a CMS system.

Thanks

Dave
  • 493
  • 9
  • 22

2 Answers2

2

the content of the source is a not accessible. seems to be due to same origin policy. you need to do it on server side or the the source should allow cross domain access.

Raab
  • 34,778
  • 4
  • 50
  • 65
  • So do I move the javascript code doing the ajax on to the server and run it from there so it's requesting from the same domain? – Dave Aug 14 '12 at 13:05
  • yes, if you can... but I meant you get the content of the source on you own server side and the get it through the same ajax – Raab Aug 14 '12 at 13:08
  • ok - any chance of an example or guide on how to do that, not exactly sure what it is you mean. – Dave Aug 14 '12 at 13:14
  • see this to get contents http://stackoverflow.com/questions/599275/how-can-i-download-html-source-in-c-sharp – Raab Aug 14 '12 at 13:31
  • That's not going to do it - this is an app to run on a phone (using HTML/CSS + PhoneGap), not from a webserver. The only server interaction is to provide html content to be displayed in the app. – Dave Aug 14 '12 at 14:30
0

I've done a bit of digging and found that it's now possible to allow Cross-Domain scripting via ajax in modern browsers. I've added the following code to my index.html as in the initial question above:

$(document).bind("mobileinit", function () {
        $.mobile.allowCrossDomainPages = true;
        $.support.cors = true;
    });

This switches on support for the request. On the server side you need to return headers enabling it from that side too, which means you can lock it to a single page if you need to (.Net example):

Response.AppendHeader("Access-Control-Allow-Origin", "*");

I can now use the app from localhost and pull the content in from the remote server. It also works on phones. Will have to test with PhoneGap but from what I've read it does support it.

Resources for this answer:

https://forum.jquery.com/topic/cross-domain-requests-with-support-cors-and-mobile-allowcrossdomainpages

http://enable-cors.org/#how-php

Dave
  • 493
  • 9
  • 22