Ask your JavaScript questions! Pay money and get answers fast! (more info)

Why does this Ajax fail to return the data? JavaScript

  • SOLVED

I want to show who is logged in, on each site. I will pull the data from here:

http://www.tailormadeanswers.com:40000/

This should be simple, yes?

I create a new file on my desktop and I type:

<!DOCTYPE html>
<html>
<head>
<title>ping tailormade</title>

<meta charset="utf8">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.wpquestions.com/js/jquery/jquery-ui-personalized-1.6rc6.js"></script>
<script type="text/javascript" src="http://www.tailormadeanswers.com/javascript_for_tma_websites/tma.js"></script>

<script type="text/javascript">
function who_is_logged_in() {
jQuery.ajax({
url: 'http://www.tailormadeanswers.com:40000',
dataType: 'json',
success: function(data) {
$('#who_is_logged_in').html(data);
},
});
}

who_is_logged_in();
setInterval("who_is_logged_in()", 8000);

</script>
</head>
<body>
Data returned from TMA: <br />
<div id="who_is_logged_in"></div>
</body>
</html>


At least for me, nothing shows up in the div "who_is_logged_in".

Why is this not working?

I tested this in Chrome and FireFox on a Mac. In FireBug, the response is just empty. I would guess this is a cross-domain issue, but I am including files from the domain tailormadeanswers.com, which I thought got me around the domain limits? (Is that not what the "script tag hack" is?)

UPDATE:

See screenshot. I took Christianto's advice and added this code:

jQuery(document).ajaxError(function(e, xhr, settings, exception) {
console.log('Response code: ' + xhr.status + ' \n'+'Exception: ' +exception+'\nResponse text : \n'+ xhr.responseText );
});

I get no information back.

Again, look here:

[[LINK href="http://www.tailormadeanswers.com:40000/"]]http://www.tailormadeanswers.com:40000/[[/LINK]]

That is valid JSON so I doubt this is a parse issue.

I've increased the prize to $40. Please test your answers before you post them.

UPDATE:

I am now trying to run the script from here:

[[LINK href="http://www.tailormadeanswers.com/who_is_logged_in.html"]]http://www.tailormadeanswers.com/who_is_logged_in.html[[/LINK]]

The page making the call sits on the same domain as the domain being called -- this should avoid any cross-domain issues, yes? But still, it does not work. Why?

The FireBug console reports no error, it simply reports that there is no response.


UPDATE:

Utkarsh, if you copy this to your harddrive, does this work for you? It is not working for me:

<!DOCTYPE html>
<html>
<head>
<title>ping tailormade</title>

<meta charset="utf8">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.wpquestions.com/js/jquery/jquery-ui-personalized-1.6rc6.js"></script>
<script type="text/javascript" src="http://www.tailormadeanswers.com/javascript_for_tma_websites/tma.js"></script>

<script type="text/javascript">
function my_callback(object) {
$('#who_is_logged_in').html(object);
}
$.getScript("http://www.tailormadeanswers.com/who_is_logged_in.php");
</script>
</head>
<body>
Data returned from TMA: <br />
<div id="who_is_logged_in"></div>
</body>
</html>

Answers (4)

2012-10-19

Utkarsh Kukreti answers:

No, that doesn't circumvent the cross domain issue.

You can do this:

Wrap the whole string like this:

my_callback({original-string});

Then run

$.getScript("http://www.tailormadeanswers.com:40000");

and add a function like this:

function my_callback(object) {
$('#who_is_logged_in').html(object);
}


Utkarsh Kukreti comments:

Using the method I posted, here's a working example:

http://jsfiddle.net/QtTGr/

Here's the json file hosted on another server: https://dl.dropbox.com/u/2164813/javascriptquestions/jsonp.txt


Utkarsh Kukreti comments:

For your latest update:

The script is on port 80, data on port 40000. You cannot do that due to http://en.wikipedia.org/wiki/Same_origin_policy

You can only use JSONP, as I've mentioned above.


Utkarsh Kukreti comments:

You were setting .html() to an object. Try .text(), or the loop.

https://dl.dropbox.com/u/2164813/javascriptquestions/lawrence_reply.html


Lawrence Krubner comments:

Perfect. This works:

[[LINK href="http://www.tailormadeanswers.com/who_is_logged_in.html"]]http://www.tailormadeanswers.com/who_is_logged_in.html[[/LINK]]

2012-10-19

Christianto answers:

Hi Lawrence,

Can you see any error if you put Global ajaxError on it?
jQuery(document).ajaxError(function(e, xhr, settings, exception) {
console.log('Response code: ' + xhr.status + ' \n'+'Exception: ' +exception+'\nResponse text : \n'+ xhr.responseText );
});


could be json parse issue, what if we iterate returned 'data'?
jQuery.ajax({
url: 'http://www.tailormadeanswers.com:40000',
dataType: 'json',
success: function(data) {
jQuery.each(data, function(key, val) {
jQuery('#who_is_logged_in').append('<div id="' + key + '">' + val + '</div>');
});
},
});


Christianto comments:

Lawrence,

I agree with Utkarsh said,
loading from http://www.tailormadeanswers.com:40000 although same domain,
but it has different port so the same origin policy will break.

I saw you converting from json to jsonp and put the json callback "my_callback" on [[LINK href="http://www.tailormadeanswers.com/who_is_logged_in.php"]]http://www.tailormadeanswers.com/who_is_logged_in.php[[/LINK]]

You can continue to add the json data inside it so it will output for example:
my_callback({"name": "Lawrence", "userid": "1", "country": "US"})

add the callback and pass the data:
function my_callback(jsonData){
if(typeof jsonData == 'undefined'){
jQuery('#who_is_logged_in').append('<div>No JSON Data</div>');
return false;
}
jQuery('#who_is_logged_in').append('<div>Data returned: ' + jsonData + '</div>');
}

function who_is_logged_in() {

jQuery.ajax({
url: 'http://www.tailormadeanswers.com/who_is_logged_in.php',
dataType: 'jsonp',
jsonpCallback: 'my_callback',
success: function(data) {
console.log("success");
}
});

}

who_is_logged_in();
setInterval("who_is_logged_in()", 8000);


You can check it if the "success" or the "jsonpCallback" that is working.

this is on jsfiddle:
[[LINK href="http://jsfiddle.net/DntEe/"]]http://jsfiddle.net/DntEe/[[/LINK]]

Right now, since it doesn't have data so "No JSON data" is printed.
let's try if this works..


Lawrence Krubner comments:

Potentially it is working. I am getting "Data returned: object Object". See screenshot.