Hello i am new to phonegap and jquery mobile and have a problem when trying to run my application via eclipse emulator and also on my htc phone.
My code works perfectly when i run the application in firefox. The HTML calls a PHP script that runs on tomcat, the php script accesses the mysql and passes back jsonp data.
Any help would be much appreciated. I have read other posts and have had not lock with my code.
I have updated the android manifest with all the correct permissions as below:
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
I have my html file below:
<!DOCTYPE HTML>
<html>
<head>
<title>Search by area</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div id="areas" data-role="page" data-add-back-btn="true">
<script type="text/javascript">
// alert dismissed
function alertMessageDimissed()
{
// do something
}
$("#areas").on('pageshow', function() {
// get the areas from the database
$.ajax({
type:'GET',
url:'http://localhost/getData.php',
dataType:'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status)
{
$.each(data, function(i,item){
var addToSession = 'sessionStorage.areaID=' + item.area_id;
$('#list').append("<li><a href='../www/choose_restaurant.html' onclick=" + addToSession + " data-transition='slidedown'>" + item.area_name +
"<span class='ui-li-count'>" + item.deal_count + "</span>" +
"</a></li>");
$("#list").listview("refresh");
});
},
error: function(data)
{
// there was no connection to the internet
navigator.notification.alert(
'No intenet connection', // message
alertMessageDimissed, // callback
'Information - Error', // title
'Done' // buttonName
);
}
});
return false;
});
</script>
<div data-role="header">
<h1> Bucuresti deals</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h1> In which area do you want to eat? </h1>
<ul id="list" data-role="listview" data-inset="true" data-filter="true" >
</ul>
</div>
</div>
</div>
</body>
</html>
My working php script is below:
<?php
header('Content-type: application/json');
$server = "127.0.0.1:3306";
$username = "root";
$password = "";
$database = "deals";
$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);
$sql = "SELECT a.area_id, a.name AS area_name, a.sector AS area_sector,
(SELECT Count(*) FROM deals.main_deals b WHERE b.areaID = a.area_id) as deal_count
FROM deals.areas a";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());
$records = array();
while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}
mysql_close($con);
echo $_GET['jsoncallback'].'(' . json_encode($records) . ');';
?>
