title: jQuery mobile - trying to get remote content with $.ajax
body: <p>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.</p>
  
  <p>Code (slightly truncated for ease of reading)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;App&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no,target-densitydpi=device-dpi;" /&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/&gt;     
  &lt;link rel="stylesheet" href="scripts/jquery.mobile-1.1.1.min.css" /&gt;
  &lt;link rel="stylesheet" href="themes/apptheme.min.css" /&gt;
  &lt;link rel="stylesheet" href="styles/mobilestyle.css" type="text/css" media="screen" /&gt;
  &lt;link rel="stylesheet" href="styles/mobilesitetyle.css" type="text/css" media="screen" /&gt;
  &lt;script src="scripts/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery.mobile-1.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/jquery.url.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(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.');
                      }
                  });
              }
  
          }
      });
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="width:100%;font-size:13px;" data-role="page" id="home"&gt;
      &lt;div data-role="header" data-position="fixed"&gt;          
          &lt;h1&gt;Home&lt;/h1&gt;            
      &lt;/div&gt;
      &lt;div data-role="content" class="submenu"&gt;
          &lt;a href="#productList" data-transition="slide"&gt;&lt;img src="images/Icon-Products.png" alt="products" /&gt;&lt;/a&gt;                
      &lt;/div&gt;
      &lt;div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-role="page" data-theme="a" id="productList" data-add-back-btn="true"&gt;
      &lt;div data-role="header" data-position="fixed"&gt;          
          &lt;h1&gt;Products&lt;/h1&gt;            
      &lt;/div&gt;&lt;!-- /header --&gt;
      &lt;div data-role="content" class="submenu"&gt;product content    
          &lt;!-- content gets put in here --&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
      &lt;div data-role="footer" class="ui-bar" data-position="fixed" data-theme="b"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Am I missing something simple?  The content from the server will just be simple HTML pages of content from a CMS system.</p>
  
  <p>Thanks</p>