Loading JSON using jQuery Mobile & Phonegap?

Question

Basically I have a php script located on a sever that generates a JSON file listing places from a mysql database. Using jQuery Mobile I am developing an application to display these places. My code works in Chrome & Safari, however when I port it over to Phonegap it doesn't work. I have searched all over the internet but can't find an answer :(.

The php file for generating JSON (json.php):

<?php
header('Content-type: application/json');


$server = "localhost";
$username = "xxx";
$password = "xxx";
$database = "xxx";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT * FROM places ORDER BY name ASC";
$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) . ');';
?>

My Javascript file located within my app (Loads JSON and displays it):

$('#places').bind('pageinit', function(event) {
    getPlaces();
});


function getPlaces() {

    var output = $('#placeList');

    $.ajax({
        url: 'http://www.mysite.com/json.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<li><a href="">'+item.name+'<span class="ui-li-count">'
                + item.checkins+'</span></a></li>';

                output.append(place);
            });
            $('#placeList').listview('refresh');
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });

}

The HTML looks like this:

<div data-role="content">
            <h3>Places</h3>
            <ul data-role="listview" id="placeList" data-inset="true">

        </ul>
</div><!-- /content -->

This code works in Chrome & Safari, however when run in the xCode simulator with Phonegap it doesn't load the JSON.

Any help would be much appreciated :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

I don't think the problem has anything to do with the server code (PHP), unless you are producing invalid JSON. The question should be tagged with JavaScript rather than PHP. Anyway, there is an excellent article describing a very similar type of application. It even includes sample code. Have a look:

Sample Application using jQuery Mobile and PhoneGap

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 19, 2012 at 11:45

Per Quested Aronsson

12.2k8 gold badges58 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ziggy Gushi · Accepted Answer · 2011-11-02 20:53:24Z

0

Dude, That's server side script it won't run unless its hosted on a server with those languages implemented. I'm running into a similar problemn One suggestion was to implmented the AJAX to fetch the data from a php site an return the data. I'm look'n to just forward the whole page over too a Safari webview window (which you have to set in phonegap permissions). Problem there is I get all the Safari chrome on the top and bottom trying to figure out how to trim that so I don't have to recode with AJAX to pull PHP data server side.

answered Nov 2, 2011 at 20:53

Ziggy Gushi

11

2 Comments

Ziggy Gushi Over a year ago

Look's like JQuerry as a Library might be useful. But if your putting the .php file into the PhoneGap Project in Xcode it won't run.. Cause like I said its server side script... But using javascript to implement the JQuerry stuff I'm not really sure what that might let u do.

Bas Danen Over a year ago

I assume, looking at the code, the php file runs on a server.

Collectives™ on Stack Overflow

Loading JSON using jQuery Mobile & Phonegap?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related