Cordova AJAX Hello World

I'm having an issue with, what I think, is an easy fix issue, but it's got me stuck.  I'm just trying to call in some json content via AJAX into a brand new Cordova iOS build.

My process:
- Install Node JS
- via CLI -> cordova create abc
- via CLI -> cd abc
- via CLI -> cordova platform add ios

Add/change some code in the www/index.html file

<!DOCTYPE html>
 <html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>

        <script src="js/jquery.min.js"></script>

        <script>
        $(function(){
          $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://domainname.com/get.php',
            success: function (data) {
              alert("success");
            },
            error: function () {
              alert("error");
            }
          });
        });
        </script>

    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Open in new window


Create the get.php file

<?
header("Access-Control-Allow-Origin: *");
header('Content-type: application/json');
$sample = array(
    'var1'=>'Hello',
    'var2'=>'World'
);
echo json_encode($sample);
?>

Open in new window


- then via CLI -> cordova emulate ios

But i get the alert("error");

Anyone have some incite into this, know what i'm missing?
dev09Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
What do you get if you paste this into the browser
http://domainname.com/get.php

Open in new window

Obviously change to the actual URL from your AJAX call - does it return a result.

What does it say in the Console - you should see a GET request that you can examine - are there any errors either in the call or the response?
0
dev09Author Commented:
Yes, it does work, i simply changed it to domainname.com for the purpose of this post.  In the browser i receive no issues at all, works perfectly.  It's only in iOS simulator (and real device)  that it doesn't work.

Not sure how to get console feedback from iOS simulator
0
Julian HansenCommented:
What happens if you do this
url: 'get.php'

Open in new window

In other words - use a relative path rather than an absolute one?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

dev09Author Commented:
Well the App will have to connect remotely, it needs to have an absolute path to connect to the server.
I think it's a cross-domain permission issue
0
Julian HansenCommented:
Is this link relevant?
The link documents how to add to cordova's whitelist.

https://cordova.apache.org/docs/en/3.3.0/guide_appdev_whitelist_index.md.html

To get more information on this (Given you don't have console access) you could do this
1. Add the following to your page
<pre id="response"></pre>

Open in new window


2. Add the following to your AJAX call
        <script>
        $(function(){
          $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'http://domainname.com/get.php',
            success: function (data) {
              alert("success");
            },
            error: function (resp) {
                // Add the response text
		$('#response').text(resp.responseText);
            }
          });
        });
        </script>

Open in new window

Let's see what is in the responseText value after the error.
0
dev09Author Commented:
Thanks, so I added that, nothing came through. Performed a search a changed it to:
$('#response').text(resp.statusText);

Open in new window

and got the error:  ERROR: SECURITYERROR: DOM EXCEPTION 18

so another google search said change the META tag too
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src: 'self' 'unsafe-inline' 'unsafe-eval'">

Open in new window


after that i tried and now it doesnt load anything, very odd and weird.
0
Julian HansenCommented:
Did you check the whitelisting aspect?

Also I would look at dumping all the headers from the AJAX call - using the getAllResponseHeaders call - see if there is anything in the headers you can see that is different when it fails.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dev09Author Commented:
Hi Julian, thanks for you all your help, it got me looking in the right direction.

I found the fix, when i add this plugin, it works:  https://github.com/robertklein/cordova-ios-security

Thanks for al your assistance!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.