Jquery function stopped working - php

Question

I have been using this script for a while and suddenly it just stopped working and returns the error message. I cannot find any errors with the code and the php page echoes valid json. Please if anyone can find an error or something wrong with this code let me know. I am using the same script other places just fine.
Go to:
http://ab-mobile-apps.com/app/grotto/index.html
then click random drink to see live. Clicking the error message will call the function again.
Thanks ahead.
function loadData() {
var output = $('#output');
var drinkImageOutput = $('#drinkImage');
var drinkIngredientOutput = $('#drinkIngredient');
var drinkNameOutput = $('#drinkName');
output.text('');
$.ajax({
url: 'http://ab-mobile-apps.com/grototest/index.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 10000,
success: function(data, status){
$.each(data, function(i,item){
var landmark =
'<div id="drinkImage"><img src="' + drinkImg + '" width="15%" /></div>' +
'<div id="drinkName">' + drinkName + '</div>' +
'<div id="dringIngredient">' + dringIngredient + '</div>';
output.append(landmark);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
}

Answer 1

Your request returns JSON not JSONP.
Try:
$.ajax({
url: 'http://ab-mobile-apps.com/grototest/index.php',
dataType: 'json',
timeout: 10000,
success: function(data, status){
$.each(data, function(i,item){
var landmark =
'<div id="drinkImage"><img src="' + item.url + '" width="15%" /></div>' +
'<div id="drinkName">' + item.sname + '</div>' +
'<div id="dringIngredient">' + item.ingredients + '</div>';
output.append(landmark);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});