Home/ Questions/Q 8383915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T17:17:14+00:00

Building my first webapp with jQuery Mobile – this will need to work with

  • 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0