Link to home
Start Free TrialLog in
Avatar of dev09
dev09

asked on

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?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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?
Avatar of dev09
dev09

ASKER

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
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?
Avatar of dev09

ASKER

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
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.
Avatar of dev09

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dev09

ASKER

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!
You are welcome.