CODEWITHSUNDEEP
phpjquerycordovajquery-mobile
Ethan Richardson
Ethan Richardson

Reputation: 491

Ajax request not working in eclipse when running on android emulator or phone

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) . ');';
?>

Upvotes: 2

Views: 1265

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You can't use url:'http://localhost/getData.php', while testing on android phone. Remember you are not any more on your local machine. Mobile phone has different IP address then your server, so you are not connecting to localhost any more.

Upvotes: 1

Related Questions