Ajax post to remote php file not working with phonegap

Question

I am trying to use Ajax post to send data from my local sqlite database in my phonegap app to my remote database. I have checked the php file and it is working fine and is inserting into the my remote database. I have also added the access to the url in the config.xml file and added $.support.cors = true; to the on device ready function. access to url in config.xml:

  <access origin="*" />
  <access origin="http://ec2-54-229-109-138.eu-west-1.compute.amazonaws.com/chrisTest.php" subdomains="true" />

I am currently using jquery-1.7.2.min and jquery.mobile-1.1.0.min.

Javascript:

$("#upload").live('click', function(){
    alert("Upload");
    db.transaction(uploadQuery, errorCB);
})


function uploadQuery(tx){
    tx.executeSql('SELECT * FROM DEMO',[], posting, errorCB);
}


function posting(tx, results){
    var len = results.rows.length;
    alert("Posting");
     for (var i = 0; i < len; i++){
         var trackID =results.rows.item(i).trackID;
         var longitude= results.rows.item(i).longitude;
         var latitude=results.rows.item(i).latitude;

            var data = {
              "trackID": trackID,
              "longitude": longitude,
              "latitude": latitude
            };
            data = $.param(data);
            $.ajax({
              type: "POST",
              dataType: "json",
              url: "http://ec2-54-229-109-138.eu-west-1.compute.amazonaws.com/chrisTest.php", //Relative or absolute path to handle.request.ajax file
              data: data,
              success: function(data) {
                alert("Form submitted successfully.");
              }
            });
      }
}

php:

<?php

$username="mxxxxx";
$password="xxxx";
$database="xxxxx";
$url = "xxxx";

$trackID = $_POST['trackID'];
$longitude =$_POST['longitude'];
$latitude  = $_POST['latitude'];


mysql_connect($url,$username,$password);

@mysql_select_db($database) or die( "Unable to select database");

$query = "INSERT INTO test(trackID,longitude,latitude) VALUES ('$trackID','$longitude','$latitude')";

mysql_query($query);

mysql_close();
echo "You successfully added your Coupon";  

?>

I am new to using ajax so any help would be appreciated!

Answer 1

This may be CORS issue ,add the following line to the top your php file.

header("Access-Control-Allow-Origin: *");

it will solve your problem.

Answer 2

I figured out what was stopping the ajax post, I removed the below line of code:

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

This line is generated automatically in the index.html file when you create a phonegap app. This may be worth a try for someone else if they are having the same issue although I do belief this line will have to be in the app for security reasons. As I am new to this I'm not 100% sure what this line does so if someone could elaborate that would be great!