getJSON function works only when ajax page loading is turned off

getJSON function works only when ajax page loading is turned off

I struggled with this so initially I gave up and turned off ajax page loading for jQuery Mobile ($.mobile.ajaxEnables = false;) and (data-ajax="false").  I basically finished my website but I REALLY WANT TO USE AJAX LOADING!!!  

My problem is when going from index.html (topics page) to news.html, and going from news.html to newstext.html, the javascript ajax calls, which should get data from my database and fill the page, aren't getting executed.  There are no errors in the console.  Here's my code...PLEASE HELP ME FIX THIS!!!

INDEX.HTML
  2. <!DOCTYPE HTML>
  3. <HTML>
  4. <head>
  5. <meta charset="UTF-8"/>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. //3 files here for jquery, mobile and css
  8. </head>
  9. <body>
  10.       <div data-role="page" id="home">
  12.                   <div data-role="content">
  13.                 <div class="ui-grid-solo">
  14.             <div class="ui-block-a"><a class="ui-bar ui-bar-e" data-ajax="false" href="news.html" style="text-align:center" data-inline="false">Main News</a></div>
  15.             </div>
  17.                   </div>
  18. </div>
  19. </body>
  20. </HTML>
NEWS.HTML
  2. <body>
  3. <div data-role="page" id="mainNews">
  4.             <div data-role="content">
  6.                   <ul class="stuff"  id="fnews" data-role="listview" data-theme="c">
  7. <li style="text-align:center" data-role="list-divider">Daily Topic</li>
  8.   </ul>
  9.             </div>
  10.       </div>
  11. <script src="js/getmainnews.js"></script>
  12. </body>
GETMAINNEWS.JS
  2. var serviceURL = "http://localhost/basket/services/";
  3. $('#mainNews').on('pageinit', function(event) {
  4. $.mobile.ajaxEnabled = false;
  5. getNews();
  6. });
  7. function getNews() {
  8. $.getJSON(serviceURL + 'getmainnews.php', function(data) {
  9. daily = data.items;
  11.             $.each(daily, function(index, news) {
  12. $('#fnews').append('<li data-icon="false"><a style="white-space:normal;" href="newstext.html?url=' + news.link + '">' + news.pic + news.article + '</a></li>');
  13. });
  14.             $('#fnews').listview('refresh');
  16.       });
  17. }
It works when ajax is turned off perfectly.  When it's on, after clicking on Main News, in the console (Chrome) the XHR returns news.html, not the php file (getmainnews.php).  When it's off, it returns the php file.  I tried changing the location of the js, I tried changing on('pageinit') to bind and to live and nothing helped.  Why isn't the ajax call working?  Please take some time and help me out!!!