JavaScript
--
Questions
--
Followers
Top Experts
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 type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.
<script type="text/javascript" src="jquery.mobile-1.4.5.m
</head>
<body>
<button>Read from server</button>
</body>
</html>
Contents of script.js: **************************
$(document).bind( "mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainP
});
$(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);
}
});
});
});
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 type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.5.
<script type="text/javascript" src="jquery.mobile-1.4.5.m
</head>
<body>
<button>Read from server</button>
</body>
</html>
Contents of script.js: **************************
$(document).bind( "mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainP
});
$(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);
}
});
});
});
Zero AI Policy
We believe in human intelligence. Our moderation policy strictly prohibits the use of LLM content in our Q&A threads.
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>
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.
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
membership
Log in or create a free account to see answer.
Signing up is free and takes 30 seconds. No credit card required.
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.
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.
EARN REWARDS FOR ASKING, ANSWERING, AND MORE.
Earn free swag for participating on the platform.
Ha! Thanks. Glad you've got it pointed in the right direction :-)
JavaScript
--
Questions
--
Followers
Top Experts
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.