How do I get Ajax working with Phonegap?

How do I get Ajax working with Phonegap?

Hi,

I am a designer/front-end developer building a PhoneGap app as my thesis project. I want to use JQM swipe page navigation  http://view.jquerymobile.com/master/demos/swipe-page/ 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 jquery.mobile-1.4.2.js:5177
      4. (anonymous function) jquery.mobile-1.4.2.js:921
      5. a.widget._loadUrl jquery.mobile-1.4.2.js:5300
      6. (anonymous function) jquery.mobile-1.4.2.js:921
      7. a.widget.change jquery.mobile-1.4.2.js:5385
      8. (anonymous function) jquery.mobile-1.4.2.js:921
      9. (anonymous function) jquery.mobile-1.4.2.js:1019
      10. b.extend.each jquery.js:4342
      11. b.fn.b.each jquery.js:4015
      12. a.fn.(anonymous function) jquery.mobile-1.4.2.js:1005
      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 jquery.mobile-1.4.2.js:3787
      19. a.event.special.swipe.handleSwipe jquery.mobile-1.4.2.js:3963
      20. e.move jquery.mobile-1.4.2.js:4009
      21. b.event.dispatch jquery.js:6495
      22. v.handle

I am using jquery-1.9.1.min.js and  jquery.mobile-1.4.2.min.js 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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).bind( "mobileinit", function() {

          $.mobile.allowCrossDomainPages = true;
                     $.support.cors                 = true;
           $.mobile.pushStateEnabled      = false;
    });
    </script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

Non-Ajax links work fine.

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

Here is a code example from one of my pages:

  2. <body>

  4. <div id="navigation" class="cards" data-role="page" data-dom-cache="true" data-next="tools" data-url="navigation">
  5. <div role="main" class="ui-content">
  6. <div class="instruction">
  7. <h1>In-app navigation</h1>
  8. <p>To navigate through this tutorial <strong>swipe</strong> left or right.</p>
  9. </div>
  10. <div class="instruction">
  11. <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>
  12. </div>
  13. <div class="instruction">
  14. <p>To get back to the <strong>instructions</strong> tap the questionmark <img src="img/questionmark-black.png" alt="question mark"> icon.</p>
  15. </div>
  16. </div>
  17. </div><!-- /page -->
  18. <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="">
  19. <div data-role="navbar" class="ui-navbar" role="navigation">
  20. <ul class="footer-nav ui-grid-c">
  21. <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>
  22. <li class="back ui-block-b"><a data-rel="back" href="#" data-prefetch="true" data-transition="flip" class="ui-btn"></a></li>
  23. <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>
  24. </ul>
  25. </div><!-- /navbar -->
  26. </div><!-- /footer -->
  27. </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" });

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

in lines 5, 60 and 63 of the original code  http://view.jquerymobile.com/master/demos/swipe-page/


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!