Develop Reference

Ajax request works on local server but not online

I have built my first website and it works on local server but not online. The problem is loading a json file with Ajax. In the published version I get the error message that my object is undefined.
This is a (simplified) version of my code that shows the problem:
$.ajax({
url: "json/torp.json",
contentType: "application/json",
success: function (data) {
torp = data;
console.log('great success!');
console.log(torp.items[3]);
},
error: function (/* request, error */) {
console.log('Network error has occurred please try again!');
}
This is the message in the console when running on local server:
great success! main.js:37:13
Object { id: "brunskar", title: "<h2>Brunskär</h2>", image: "img/countryside.jpg" }
But when I publish online this is what I get:
great success! main.js:37:13
TypeError: torp.items is undefined
In the Utilities Net section I get status code 200 and the whole content of the JSON file is readable under the "reply" tab, so it seems like the file is loaded. But I don't understand why my object is undefined.

Sounds like an asynchronous issue (your page is loading before your ajax call can return the data, therefor it is returned as undefined) one way to solve this is to put a function inside your ajax call that fires your page functions that use the data being returned by the call.
$.ajax({
url: "json/torp.json",
contentType: "application/json",
success: function (data) {
torp = data;
console.log('great success!');
console.log(torp.items[3]);
function usePageData (); <----calls webpage function utilizing
data
},
error: function (/* request, error */) {
console.log('Network error has occurred please try again!');
}
Hope that helps!

Problem solved by changing
contentType: "application/json"
to
dataType: "json"!
I used the tip from Patrick Evans in one of the comments. Thank you for the help!

AJAX "Error: callback was not called" appears randomly

I'm pretty new to ajax and I faced issue, that is not solvable by any of available stackoverflow's threads. I've got array with streams names and I use ajax to get detailed info about them by using Twitch API. For some of those requests I get following error:
Error: callback was not called
at Function.error (VM11084 jquery.min.js:2)
at b.converters.script json (VM11084 jquery.min.js:4)
at Nb (VM11084 jquery.min.js:4)
at A (VM11084 jquery.min.js:4)
at HTMLScriptElement.c (VM11084 jquery.min.js:4)
at HTMLScriptElement.dispatch (VM11084 jquery.min.js:3)
at HTMLScriptElement.q.handle (VM11084 jquery.min.js:3)
I found it peculiar that generated url (check url variable in code below) is ok and when I paste it in chrome's search bar, it leads to proper result. The most confusing part is that it works properly for 4 strings in streamsNames array and for others it does return this error code. I googled a lot however I cannot find proper solution or just explanation of this behaviour.
Here's the relevant part of the code:
function updateStreamInfo() {
streamsNames.forEach(function getStreamsCurrentData(streamName) {
var url = 'https://wind-bow.glitch.me/twitch-api/streams/' + streamName;
console.log(url);
$.ajax({
url: url,
dataType: 'JSONP',
jsonpCallback: 'callback',
type: 'GET',
success: function (data) {
console.log(data);
var stream;
if(data.stream === null) stream = new Stream(streamName, "", "");
else stream = new Stream(streamName, data.stream.game, data.stream.channel.logo);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
})
})}
And one more thing: this whole things runs in codepen.io but I do not know if that has any influence on anything in this case.
Any ideas what might be the issue?

Ajax return what client would see

I am making a chrome extension that checks for a certain word on a site they specify. To do this, I make an Ajax request to get the html. However, this doesn't return the data that I would like, and I am speculating here: it only receives the data before all JS is rendered, or minus things specific to the client. Here is how I'm making the request. Should I change any of the parameters, or is there a better way of receiving that data?
$.ajax({
url: url,
dataType: "html",
context: document.body,
success: function(data) {
console.log("Success");
},
error: function (e) {
console.log("Error: Not a valid URL.");
}
});

Random jquery ajax error readyState=0

I have a web application that uses jQuery ajax to get some data. In this site I also have a Logger that reports to me when an error happens.
Very frequently I get this error on ajax calls:
{"readyState":0,"responseText":"","status":0,"statusText":"error"}
The problem is that this error is randomly and I'm not able to reproduce it. I get this for all ajax scripts. The request is made on same origin and at the server I've defined "Access-Control-Allow-Origin", "*".
All browsers get this error:
Safari 9
Chrome
Internet explore 11
etc...
The jQuery ajax code:
$.ajax({
url: 'MyUrl',
type: 'POST',
dataType: "json",
data: {dataVars},
error: function(response, ajaxOptions, thrownError) {
log.error( 'StringError: ' + ajaxOptions + '\n\nthrownError: ' + JSON.stringify(thrownError) + '\n\nResponse: ' + JSON.stringify(response));
},
success: function(res){
}
});
The request is performed to a servlet. What could be the problem?

From W3schools:
readyState=0
Means that the request isn't sent. (your broswer isn't connected to the targeted server).
It's mean that the socket is not opened : no TCP handshake, so the targeted URL is just not reached...
So check the validity of myUrl (is it a good domain? no cross-origin), and also connectivity of the client (proxy? if myUrl is secured / use an other port, maybe it is just not opened...)
I think the issue might be on server side, if it is random. but especially for myUrl, if you can get the web page anyway...
But the error is strange, if it comes from the same server!
Anyway, I think it is because the connection between your client and the targeted server is unstable, so maybe you can try to inscrease the timeout of the request, or retry it on error (example with recursive loop):
var remainingRetry = 3; //or something else
function handleRequest()
{
$.ajax({
url: 'MyUrl',
type: 'POST',
dataType: "json",
data: {dataVars},
error: function(response, ajaxOptions, thrownError) {
if (remainingRetry)
 {
remainingRetry--;
setTimeout(handleRequest, 1000); //timeout between two tries
}
else log.error( 'StringError: ' + ajaxOptions + '\n\nthrownError: ' + JSON.stringify(thrownError) + '\n\nResponse: ' + JSON.stringify(response));
},
success: function(res){
}
});
}

I had the same issue before and in my case the problem was
that other js function redirecting to another page before my first request has a chance to complete which is practically canceling or killing my request
some thing like
function redirectToAnotherPageFn () {
window.location = "/otherpage.html";
};

jQuery invalid label jsonp

I use jQuery to get php-script result with ajax-function. Problem is php-script is on the another domain, so I should use "jsonp" as returned dataType, BUT php-script returns json, not jsonp (maybe script is not correct) and I get syntax error. How can I handle it? I suppose, that I can somehow get json string before ajax-function handles it and rises error, is it possible?
This is my ajax function:
$.ajax(
{
type: "POST",
dataType: "jsonp",
url: "http://www.pecom.ru/bitrix/components/pecom/calc/ajax.php",
data: res,
error: function (xhr, ajaxOptions, thrownError) {
alert("error: " + xhr.status);
},
success: function (data) {
alert("Data Loaded: " + data)
}
}
)
Thank you!

The short answer is that you can't.
The longer one is that you have to set up some sort of proxying: make the request on the server side from a machine you control, transform the results to proper JSONP there, and connect to that server via AJAX.
(Or, in the very unlikely event that the target server supports CORS, you can use that instead of JSONP.)