d3.json Troubles - javascript

I've spent a good portion of my evening working on this.
I am trying to get this live json data http://citibikenyc.com/stations/json loaded onto a page on my website using d3.json.
Just testing:
var bike = "http://citibikenyc.com/stations/json";
d3.json(bike, function(error, json) {
console.log(json);
});
doesn't work. I get the error
XMLHttpRequest cannot load http://citibikenyc.com/stations/json. Origin http://hochemoche.com is not allowed by Access-Control-Allow-Origin.
Is there something that I'm missing? Is there possibly some restriction coming from the page which I'm submitting my request to? Any help on this would be greatly appreciated. I don't believe that there is any restriction coming from citibike's site because this same request works as a curl from my Terminal, also other's have used this data, but can't seem to figure out how they are loading it based on their code.
eg: http://jehiah.cz/citibikenyc

#Blaklaybul
The Access-Control-Allow-Origin parameter must be set by the JSON source, in this case it is "http://citibikenyc.com/stations/json".
Try to include the CORS parameters in the header of the ajax request you are making. See http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
You can try other alternatives like jsonp etc, again information of which is available in the above link.

If you use Chrome browser, you might also use an extension namely "Allow-Control-Allow-Origin: *". After installing and launching it, I believe it will work.
Hope all thing will be ok!

Related

Google Chrome shows the status of XHR call as (blocked:other)

I am getting the following status in one of my http call. I haven't seen this status before. All my call are being blocked and no hits are received at server.
I tried looking up for it and found that it might be due to something called Mixed content. Unfortunately, I do not have much idea about that either.
Can someone explain what might be causing this issue and how to get around it. ?
one possible resolution if you use adblock or any plugins like that, unenable that
This massively helped me. Was related to ad blocker.
My ajax url had the word 'advert' in it so the ad blocker
https://stackoverflow.com/a/56048381
Since you mentioned mixed content, it may be caused by ajax with http protocol in a https context, which will be blocked.

How can I get the reason for img.onerror firing?

For example, the webserver sends back a 403 forbidden and the image fails to load. I can detect the general failure through the error event, but I want to get some more information about why. The browser obviously knows, but is there a way to get it from javascript?
Workarounds may be to try and load the image via ajax or issue a HEAD request and assume the error will reoccur. Neither seem great though.
just open fire-bug or developers tools and look in net tab. there should be every request the browser made with corresponding response including all headers and response body. Find the call for your image and you should see what the server answer really is.
edit> oh sorry, now I see you need to get the info with javascript

JSON-P request to URL does not work?

I've been trying to get this to work for about three hours now. Searched around, looked all over actually, and I tried all the examples people showed, none of which worked. This is really starting to bug me. What I'm trying to accomplish is a call to BitCoin Charts JSON file that holds all the bitcoin data. I am setting up a webstore, and would like the price to be accurate when the user loads the page.
Here is the snippet of code where I call the $.getJSON() function:
function JSONCall() {
var url = "http://api.bitcoincharts.com/v1/weighted_prices.json";
$.getJSON(url + "?callback=?", Update);
}
function Update(data) {
//there will be code here to change the HTML on my site, but for now, this works to test
console.log(data);
}
The current error that I'm experiencing is:
Resource interpreted as Script but transferred with MIME type text/html: "http://api.bitcoincharts.com/v1/weighted_prices.json?callback=jQuery19100276493770070374_1387411109377&_=1387411109490". jquery-1.9.1.js:8336
Uncaught SyntaxError: Unexpected token :
and I cannot for the life of me get it to work. My code looks fine, according to everything I've seen this far. If anybody knows more about this than me and would be willing to help, that would be fantastic! Thanks in advance.
I checked the URL and it doesn’t return JSONP, only plain JSON.
You will need to find another way, some options come to mind:
Do a CORS request (cross-origin) if the service supports it
Run via a server-side proxy
See if the service supports JSONP in some other way

Converting jquery code to prototype for a cross browser Ajax request in order to obtain Latest Tweets

Converting jquery code to prototype for a cross browser Ajax request
My first post !
I had to fetch my latest tweet and so had to perform a cross browser request. The current app uses prototype, but I am somewhat familiar with jquery.
So, I began in jquery as :
$.ajax('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?', {
dataType: "jsonp",
success:function(data,text,xhqr){
$.each(data, function(i, item) {
console.log(item.text);
});
}
});
I get a warning as :
'Resource interpreted as Script but transferred with MIME type application/json.'
But, I do get to see my last tweet. Fine.
So, I decided to do the same in prototype and then try eliminating warnings, if any. But, I got nowhere near even after trying for hours.
This is what I came up with initially in prototype. I had a lot of changes/alterations that followed but none worked.
new Ajax.Request('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?', {
contentType: "jsonp",
onSuccess:function(transport){
console.log(transport) ;
}
});
The request succeeds but the response text is nil / " " . I get no error in Firefox but in Chrome the error is :
XMLHttpRequest cannot load http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?. Origin http://localhost:4000 is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"
Any help shall be greatly appreciated. Thank you.
Thanks Darin for getting me back onto Dandean's JSONP for prototype js.
Although I did not mention in the first place(the question was getting a bit long), I had tried using Ajax.JSONRequest from Dandean (the very link you are referring to). The request was constantly getting failed, and I didnt go further into using it as I was assuming it would be pretty straight forward getting it done in prototype too, like jquery. As I got no more answers, justifiably so, I decided to wrap my head around using Ajax.JSONRequest. The request failure was not due to a gateway timeout. It was because the request url had params callback repeated in it.
So, the request url turned out to be
GET (twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&&callback=?&callba‌ck=_prototypeJSONPCallback_0)
Thus, I defined my url without callback and it performed as desired.
However, I still get a warning :
Resource interpreted as Script but transferred with MIME type application/json
Here is the equivalent prototype :
new Ajax.JSONRequest('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1', {
onSuccess:function(response){
response.responseJSON.each(function(item){
console.log(item.text);
});
You may take a look at the following page.
Regarding the error [Refused to get unsafe header "X-JSON"], this can happen if your page is under SSL, but the URL referenced in your AJAX call is not also an HTTPS URL.

jsFiddle Ajax /echo/json not working with plain vanilla JavaScript

I'm trying to use just plain JavaScript within jsFiddle to run a JSON Ajax test...
http://jsfiddle.net/qwYu9/
...but all I get back is an empty object '{}'?
You can see an alternative version by adding /1/ to the end of the above URL - and from that example it breaks completely.
I've looked at the API documentation http://doc.jsfiddle.net/use/echo.html and it's not that helpful (to me anyway).
Can anyone shed any light on this please.
Regards,
Mark
data should be in URL format
/echo/json/?json={"text":"some text","array":[1,2,"three"],"object":{"par1":"another text","par2":[3,2,"one"],"par3":{}}}&delay=3
http://jsfiddle.net/zalun/qwYu9/7/
You are trying to query a domain different from the one the javascript is running in. That's not possible since it might pose a security risk and is blocked at the browser level.
This error was generated:
Unsafe JavaScript attempt to access frame with URL http://jsfiddle.net/qwYu9/ from frame with URL http://fiddle.jshell.net/qwYu9/show/. Domains, protocols and ports must match.
XHR finished loading: "http://fiddle.jshell.net/echo/json/".
As you can see, domains differ from jshell.net and jsfiddle.net

Categories

Resources