Ajax connection from Intex XDK failing

Question

I’m having a problem connecting to a php page using Ajax from my phone. I’ve simplified the transaction as much as possible. The server side code is:

<?php
    echo(json_encode('success'));
?>

The client side code is:

$.ajax({
           ‘url’: "http://www.skynet.ie/~lobo/test.php",
           ‘success’: function(results){
                   alert(results);                      
           },
           ‘error': function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(JSON.stringify(XMLHttpRequest));
}
});

When testing from the Intel XDK emulator I get a successful response. When I launch the app from my phone (IOS) I get:

readyState: 0, responseText: ””, status: 0, statusText: ”error”

from the error function. I have tried adding

header('content-type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");

to the php page to no avail. I’ve set $.support.cors = true; locally. I’ve tried using the $.getJSON and just about every ajax option I could find that seemed relevant. I get a successful response connecting to http://time.jsontest.com from the phone and I can get a response from my own site in the emulator. I really don’t know what might be going wrong when I try connecting from the phone to the server. I’m thinking Any insights would be greatly appreciated.

Stephen

how are you building for ios? or are u using app-preview? – krisrak Oct 08 '14 at 18:46 — krisrak, Oct 08 '14 at 18:46
It's run through app-preview. – stephen Oct 09 '14 at 11:44 — stephen, Oct 09 '14 at 11:44

score 2 · Answer 1 · answered Oct 09 '14 at 22:18

You are encountering a CORS issue. Try the following:

In order for you to make ajax requests to a foreign website within Intel XDK or apps built by XDK, I recommend that you add the xhr.js script in the HEAD element.

For example,

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
    <title>Your New Application</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <style type="text/css">
        /* Prevent copy paste for all elements except text fields */
        *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
        input, textarea  { -webkit-user-select:text; }
        body { background-color:white; color:black }
    </style>
    <script src='intelxdk.js'></script>
    <script src='xhr.js'></script>
    <script type="text/javascript">
        /* Intel native bridge is available */
        var onDeviceReady=function(){
        //hide splash screen
        intel.xdk.device.hideSplashScreen();
        };
        document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
</head>
<body>
<!-- content goes here-->
    <h2>Hello World</h2>
</body>
</html>

For more information about making ajax requests within Intel XDK, go to https://software.intel.com/en-us/html5/articles/how-to-access-JSON-data-in-HTML5-apps

I realise it certainly looks like a CORS issue but I've tried adding xhr.js and got exactly the same result. — stephen, Oct 10 '14 at 14:14

score 2 · Answer 2 · answered May 01 '15 at 16:26

I had the same issue and discovered this solution on Intel's forum. It appears it was a bug in Intel XDK's software, and all new projects created from ,templates were ignoring ajax calls. I have just imported my projects www folder to a new project and the ajax call is working now. I know it's probably too late for you, but hopefully it will help someone else.

Ajax connection from Intex XDK failing

2 Answers2