Question

What I am trying to do is retrieve JSON data from an online web service that searches and finds a certain string in a MySQL database and display it using Javascript on an HTML page.

What I am struggling with is actually displaying the resulting data.

The relevant areas of my HTML page looks like this:

<form onSubmit="results()">
    <fieldset>
        <label for="area">First digits of postal code:</label>
        <input name="area" type="text" maxlength="4" placeholder="AB12" required />
        <input type="submit" value="Search" name="search" />
    </fieldset>
</form>



<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

function results(){
    $.ajax({
        url: 'http://www.foobar.com/cp/index.php?area=AB12',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<h1>'+item.location+'</h1>'
                + '<p>'+item.id+'</br>';

                output.append(place);
            });
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
};
</script>

<div id="place">
<h3>Places near your location</h3>
</div>

The page for the GET data is http://www.foobar.com/cp/index.php with the search variable ‘area’. Test sample is ?area=AB12.

Answer 1

It seems that this service is not correctly wrapping the JSON object in parentheses so it doesn’t work as JSONP.

See: http://www.entertainmentcocktail.com/cp/index.php?area=AB12&jsoncallback=TEST

It returns:

TEST[{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]

while it should return:

TEST([{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]);

You won’t be able to use it because it is not valid JSONP.

UPDATE:

Answering more info from the comment – if you control the server-side script then try changing:

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . json_encode($records);

to:

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

and see if that works.

UPDATE 2:

Answering another comment. Do you actually initialize the output variable? For example with something like this at the beginning:

var output = $('#place').append('<div/>');

Do you actually call your results function? It must be called with:

results();

or registered somewhere as an event handler, using the jQuery way:

$('form').submit(results);

but then add:

return false;

to the end of the results function to prevent the page from being reloaded.

See this demo: http://jsbin.com/uziyek/1/edit – it seems to work.

Another problem:

There seems to be another problem with your code, that the area=AB12 parameter is hardcoded into your URL. What you should do instead is get the value from the form and send that.