JQuery AJAX call, IE9 issues with JSON - javascript

JSFiddle: http://jsfiddle.net/D2s2M/1/
I cannot figure out why this does not work in IE9. I've seen other questions here on Stack with similar issues, none of which have solutions that seem fix my problem.
This issue is specific to IE9, it does work in FF and Chrome. However, I am seeing some oddities in Chrome that do not make sense: if I append the contentType:'application/json' inside of the attributes, it breaks functionality inside of Chrome.
Here is the code that is in fiddle:
$('document').ready(function(){
$.ajax({
dataType: 'json',
type:'GET',
url: 'https://freegeoip.net/json/?callback=',
//contentType: 'application/json',
success: function(response, status, xhr){
var ct = xhr.getResponseHeader("content-type") || "";
$('#text').text(ct);
},
error: function(a,b,c) {
$('#text').text('Error: '+' '+b+' '+c);
},
timeout: 3000
});
});
Thanks

Change
dataType: 'json',
to
dataType: 'jsonp',

Solution: http://jsfiddle.net/D2s2M/2/
I'm not precisely sure why this cross-domain issue was IE specific nevertheless, JSONP did lead to resolving the issue.
The service I'm using does support JSONP, in the url there is a querystring variable to specify the name of the callback you wish to use. (JSONP requires that the data either be wrapped in a callback inside of the file itself, or set and passed an object inside of the JSON file.. this is required because JSONP loads everything in the head of the DOM to bypass cross-domain restrictions).
Revised Code:
$('document').ready(function(){
$.ajax({
dataType: 'jsonp',
type:'GET',
url: 'https://freegeoip.net/json/?callback=func',
contentType: 'application/json',
async: false,
jsonpCallback: 'func',
success: function(data){
console.log(data);
},
error: function(a,b,c) {
$('#text').text('Error: '+' '+b+' '+c);
},
timeout: 3000
});
});

Related

Usage of JSON.stringify() breaks page without errors in console

Usage of JSON.stringify() breaks page without errors in console
EDIT: I read about jquery plugin jquery-json, I tried that with the same result.
var bookmarkParams = {"id":"123456"};
$.ajax({
url: 'http://service',
cache: false,
type: "POST",
dataType: "json",
headers: {
// some headers
},
contentType: 'application/json; charset=UTF-8',
data: JSON.stringify(bookmarkParams),
success: successCallback,
error: errorCallback
});
// successCallback & errorCallback are defined functions
any ideas why this might be?
If i don't use JSON.stringify() then the page does not break but my AJAX request won't function correctly when passing my data to the server.
What is params? Don't you mean bookmark params?
try this...
var bookmarkParams = '{"id":"123456"}';
then change params to bookmarkParams

JSONP request not responding

I have a problem with my code and i can't get it to work.
The request should go to my main domain, grab the version number and post it on the application but this does not happen.
Code:
$.ajax({
url: 'http://maindomain.com/dbstruk/version',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'jsonpCallbackSPP',
success: function(data){
$('#latest-version').text(data.version/100);
}
});
The location: maindomain.com/dbstruk/version contains only one line:
{"version":"105"}
Am i overseeing something?
Thank you.

jQuery Ajax PUT not firing

The following ajax works exactly as advertised in Chrome. HTTP PUT is used to trigger the insertion of an object into a RESTful API.
$.ajax({
type: "PUT",
url: "/ajax/rest/team/create/",
dataType: "json",
processData: false,
data: JSON.stringify(teamObject),
success: function (response) {
teamObject = response.object;
}
});
I note that the jQuery API docs helpfully tell me that PUT and DELETE may work but are not guaranteed in all browsers. Such as is my problem.
How is a RESTful API supposed to be implemented on the client side with a problem like this?
EDIT: Firebug tells me that FF is indeed issuing a PUT, but for some currently unknown reason it's dying before getting to the server. To repeat, this works fine in Chrome.
EDIT: Fiddler doesn't see the FF attempt at all. :(
I got the following to work.
var payload = JSON.stringify(teamObject)
syncHTTP('/ajax/rest/team/create/', 'PUT', payload);
function syncHTTP(url,method,payload) {
var client = new XMLHttpRequest();
client.open(method, url, false);
client.setRequestHeader("Content-Type", "text/plain");
client.send(payload);
}
I'd rather use jQuery than roll my own tho. :| If anyone ever figures it out, just add an answer and if it works I'll accept it.
Thanks.
$.ajax({
type: "PUT",
url: "/ajax/rest/team/create/",
dataType: "json",
contentType: "application/json",
processData: false,
data: JSON.stringify(teamObject),
success: function (response) {
teamObject = response.object;
}
});
You need to add contentType. When contentType is set to application/json jquery do not try to create JSON object from JSON string but send it as is - as string.

simple REST call from Javascript

I am trying to call my service from here
http://diningphilospher.azurewebsites.net/api/dining
using below javascript,
$.ajax(
{
type: "GET",
dataType: "json",
url: "http://diningphilospher.azurewebsites.net/api/dining/",
success: function (data)
{
alert(data);
}
});
But I am getting error relating cross origin. I see people suggest using JSONP but I guess my server does not support JSONP. I studied CORS and could not understand the head or tail of it. I would like to know the way around to read the JSON that sits in different domain.
I hope this should work:
$.ajax(
{
type: "GET",
dataType: "jsonp",
url: "http://diningphilospher.azurewebsites.net/api/dining/",
success: function (data)
{
alert(data);
}
});
Or just add/append ?callback=? along with your cross-domain url.

jQuery ajax jsonp call always get unexpected token error

I've been wasting a great deal of time for something I think is so simple, yet there are no good examples that illustrate how and what the ajax call is doing.
This is my javascript code:
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
data: {
location: myLoc,
timestamp: myTime,
sensor: true
},
success: function(){alert('OK');},
error: function(){alert('FAIL');}
})
}
The variables "myLoc" and "myTime" are not the problem. In fact if I cut and paste the URI into my browser it works just fine and shows the data: https://maps.googleapis.com/maps/api/timezone/json?callback=jQuery18307430207263678312_1354817349576&location=36.7468422%2C-119.7725868&timestamp=1354817353&sensor=true&_=1354817353398
From what i've been reading, the "callback" parameter is automagically generated and somehow the code should be smart enough to call the success function or error function.
The error that chrome returns is "Uncaught syntax error unexpected token ':'"
The javascript code always calls the error function no matter what I try. I added a jsonpCallback parameter (didn't work), json parameter (didn't work), changed dataType to "json" (didn't work due to cross domain error).
Please help.
$.ajax({
type: 'GET',
url: 'https://maps.googleapis.com/maps/api/timezone/json',
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
data: JSON.Stringify({
location: myLoc,
timestamp: myTime,
sensor: true
}),
success: function(){alert('OK');},
error: function(){alert('FAIL');}
});

Categories