Difficulty with showing JSONP results in HTML - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Difficulty with showing JSONP results in HTML

JSON,JSONP,getJSON

eawade

8:06 pm on Dec 29, 2011 (gmt 0)

10+ Year Member

This is driving me crazy. I wrote a php api file and stored it on my server. When I run the url directly the JSON results are perfectly echoed to the screen, with no problem. However, when I attempt to access the results from another domain (e.g. Cross domain) I can not get the values to show. The screen is still blank. I hope this is making sense. I'm wondering if there is something wrong with my javascript call below. This is really becoming a royal pain.

Any help will be greatly appreciated.

The code below:

Note:
//Example of what the JSON results would look like
{
"name": "John Doe",
"url": "http://www.adomain.com",
"created": "A DATE HERE"
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<html>
<head>
<title>API JSON Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
 var timeService = "http://api.MYDOMAIN.com/api.php?key=abc&num=1&format=json&callback=?";

 $.getJSON(timeService, function(data) {
 $('showdata').html("<p>ulore="+data.name+" url="+data.url+" created="+data.created+"</p>");
 });
});
</script>
<div id="showdata"></div>
</body>
</html>

daveVk

12:06 am on Dec 30, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

JSONP needs some wrapper content to be added to the reply to handle cross domain issues. Your server may not be doing this.

The way JSONP works is simple, but requires a little bit of server-side cooperation. Basically, the idea is that you let the client decide on a small chunk of arbitrary text to prepend to the JSON document, and you wrap it in parentheses to create a valid JavaScript document (and possibly a valid function call).

[bob.pythonmac.org...]

eawade

9:47 am on Dec 30, 2011 (gmt 0)

10+ Year Member

Hey Thanks DaveVk. I really appreciate the response. This is very strange to me. On my remote server, all is fine. I've successfully encoded it in JSONP and have valid result. However, each and every time I attempt to access the JSONP results - either from the same domain or via cross-domain, the screen is blank. I've tried 1 million different things and have been at this for a couple of days now. I have been reading forums etc and no one else seem to have this kind of problem, not to the extent to which I'm having it. Note that below is what the JSONP looks like:

?({"posts":[{"post":{"name":"Mike Jones","url":"http:\/\/aweburl.com","timestamp":"2011-12-08 09:48:04"}}]});

For the life of me I can't figure this out.

daveVk

12:48 pm on Dec 30, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

$('showdata') should be $('#showdata') ?

So the server is wrapping the original json "data" thus

?({"posts":[{"post":data}]});

No idea if that is correct or not.

First establish if callback happens at all

$.getJSON(timeService, function(data) {
alert('good');
});

and if so probe to see what data contains
eg
alert(data.name);
alert(data.posts);
alert(data.posts[0]);
etc

eawade

6:42 pm on Dec 30, 2011 (gmt 0)

10+ Year Member

Hey DaveVK,

Thanks for everything. I have solved the issue. The problem was in the below section of code. First I failed to include '#' in front of 'showdata'. Next, as you can see, my variables were incorrect... so instead of data.name I was supposed to name it data.post.name. Thanks a bunch..

$.getJSON(timeService, function(data) {
$('#showdata').html("<p>ulore="+data.post.ulore+" url="+data.post.url+"
created="+data.post.created+"</p>");});