asked on

ajax call does not work on the phone.

An app I am working on needs to read some json files from a remote server using jQuery. I use an ajax call and it works fine when testing in Firefox & Chrome with Ripple, but it does not work when installed on my phone (Galaxy S5 mini). As you can see from the code I have added the lines that enable cross-domain calls and in the config.xml file I have added the line: <access origin="*" launch-external="yes" /> which should open up for all sites. I am using PhoneGap Build to create the apk file.

I am not an expert in any of this, but based on my understanding this should work even on the phone, but it does not. The error message I get when running on the phone is ”404 Not Found”. Does anyone see what I am missing here?

Contents of index.html: *******************************************************
<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
      <script type="text/javascript" src="script.js"></script>
      <link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.min.css">
      <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
      <button>Read from server</button>
</body>
</html>

Contents of script.js: ***********************************************************
$(document).bind( "mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});

$(document).ready(function(){
      $('button').click(function(){
             $.ajax({
                  url: "http://gamespro.org/dag/testfile.json",
                  async: false,
                  success: function(data){
                        $.each(data, function(key, val) {
                              alert(val);
                        });
                 },
                  error: function(xhr){
                 alert("An error occured: " + xhr.status + " " + xhr.statusText);
                   }
            });
      });
});

Ray Paseur

Please see: https://api.jquerymobile.com/mobileinit/ where it says, "You must connect a handler to the mobileinit event before you load jQuery Mobile, ..." I cannot test this, but it might be worth a try. Ignore the PHP stuff - that's just my way of keeping tracking comments in my work.

<?php // demo/temp_daghoff.php
/**
 * http://www.experts-exchange.com/questions/28938675/ajax-call-does-not-work-on-the-phone.html
 *
 * https://api.jquerymobile.com/mobileinit/
 * http://gamespro.org/dag/testfile.json
 */
?>
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>

<script>
$(document).bind( "mobileinit", function(){
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});
</script>

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
$(document).ready(function(){
    $('button').click(function(){
        $.ajax({
            url: "http://gamespro.org/dag/testfile.json",
            async: false,
            success: function(data){
                $.each(data, function(key, val) {
                    alert(val);
                });
            },
            error: function(xhr){
                alert("An error occured: " + xhr.status + " " + xhr.statusText);
            }
        });
    });
});

</script>

</head>

<body>
      <button>Read from server</button>
</body>
</html>

Open in new window

daghoff

ASKER

Hi Ray and thanks for your interest.
But I knew about this and had already added this to my code as far as I can see. My script.js with the bind code is executed between loading jQuery and jQuery Mobile.
But when I run your index.html nothing gets executed after processed by PhoneGap Build and run on the phone. In my browsers it is all OK as usual. I have also added alerts to the bind, success and error. Nothing happens on the phone.
Is there anything else you can think of? I have struggeled with this for a week now.

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

daghoff

ASKER

I found the error. I had to add a white list to my config.xml. Its a requirement for the latest version of Cordova. Here is the link:
http://stackoverflow.com/questions/30014539/cordova-phonegap-all-external-ajax-requests-returns-404

And I kind of knew about this also since I had done a lot of research. But I was not sure how to add the white list and it did not make any sence to me either. What if my web site is not on the whitelist and why add a whitelist when I had opend up for everything already with the access origin tag?

I am so happy now I will grant you 500 points even if you did not solve my problem.

Ray Paseur

Ha! Thanks. Glad you've got it pointed in the right direction :-)