How do I get Ajax working with Phonegap?

How do I get Ajax working with Phonegap?


I am a designer/front-end developer building a PhoneGap app as my thesis project. I want to use JQM swipe page navigation but can't get it to work as I get the following error (only showing one example but I get the same for every Ajax-based link on the page):

  1. XMLHttpRequest cannot load file:///Users/.../Sites/map-compass/www/tools.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. index.html:1
    1. OPTIONS file:///Users/.../Sites/map-compass/www/tools.html No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. jquery.js:10335
      1. send jquery.js:10335
      2. b.extend.ajax jquery.js:10335
      3. a.widget.load
      4. (anonymous function)
      5. a.widget._loadUrl
      6. (anonymous function)
      7. a.widget.change
      8. (anonymous function)
      9. (anonymous function)
      10. b.extend.each jquery.js:4342
      11. b.fn.b.each jquery.js:4015
      12. a.fn.(anonymous function)
      13. navnext swipe.js:9
      14. (anonymous function) swipe.js:29
      15. b.event.dispatch jquery.js:6495
      16. v.handle jquery.js:6184
      17. b.event.trigger jquery.js:6399
      18. e
      19. a.event.special.swipe.handleSwipe
      20. e.move
      21. b.event.dispatch jquery.js:6495
      22. v.handle

I am using jquery-1.9.1.min.js and and have also added a few options that I've found in another post here on the forum. The scripts in my <head> are

  1. <script src=""></script>
    $( document ).bind( "mobileinit", function() {

          $.mobile.allowCrossDomainPages = true;
                     $.support.cors                 = true;
           $.mobile.pushStateEnabled      = false;
    <script src=""></script>

Non-Ajax links work fine.

The General PhoneGap config.xml has a tag  
  1. <access origin="*" /> 

Here is a code example from one of my pages:

  1. <body>

  2. <div id="navigation" class="cards" data-role="page" data-dom-cache="true" data-next="tools" data-url="navigation">
  3. <div role="main" class="ui-content">
  4. <div class="instruction">
  5. <h1>In-app navigation</h1>
  6. <p>To navigate through this tutorial <strong>swipe</strong> left or right.</p>
  7. </div>
  8. <div class="instruction">
  9. <p>To access <strong>compass</strong> view tap the compass <img src="img/compass-black.png" alt="compass"> icon at the bottom of the screen.</p>
  10. </div>
  11. <div class="instruction">
  12. <p>To get back to the <strong>instructions</strong> tap the questionmark <img src="img/questionmark-black.png" alt="question mark"> icon.</p>
  13. </div>
  14. </div>
  15. </div><!-- /page -->
  16. <div id="footer" data-role="footer" data-position="fixed" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a ui-footer-fixed slideup" style="">
  17. <div data-role="navbar" class="ui-navbar" role="navigation">
  18. <ul class="footer-nav ui-grid-c">
  19. <li class="home ui-block-a"><a href="index.html" data-ajax="false" data-prefetch="true" data-transition="fade" class="ui-btn ui-btn-active"></a></li>
  20. <li class="back ui-block-b"><a data-rel="back" href="#" data-prefetch="true" data-transition="flip" class="ui-btn"></a></li>
  21. <li class="compass-view ui-block-c"><a data-ajax="false" href="compass.html" data-prefetch="true" data-transition="turn" class="ui-btn"></a></li>
  22. </ul>
  23. </div><!-- /navbar -->
  24. </div><!-- /footer -->
  25. </body>
I have amended the JS file by replacing the .demo-page class with .cards and because I don't use a header toolbar or a pop-up I've commented out 

  1. $( "#header" ).toolbar({ theme: "b" });

  1.     // $( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );
  2.     // We use the same header on each page
  3.     // so we have to update the title
  4.     // $( "#header h1" ).text( title );

in lines 5, 60 and 63 of the original code

I realise that this is not a PhoneGap forum but I would be grateful for pointers on how to make this work. I have seen references to JSONP and the likes but perhaps the Swipe Navigation JS can be modified to use non-Ajax linking as well? Please note that I am new to both JavaScript and PhoneGap so be gentle :)

Thanks in advance!