Develop Reference

Jquery load function throws "XML Parsing Error: not well-formed" error in firefox

Trying to load an xml file and getting the xml parsing error.
$("#analyticForm_description").load('https://192.168.23.10/SystemServices/main?system:run=html/indicators/templates/editApp-definition.xml&Id=1000205&palletId=testtt', function() { MD.ui.editPallets.editform_definition(); } );
Should not throw any error. Note the url provided is valid and accessible from a browser directly. The function is also being called. Somehow even after the error reported on console, page loads successfully.
Do not want to see any errors reported on console.

I think Firefox expects an Content-Type and Chrome ignores it.
$.ajax({
url : "https://192.168.23.10/SystemServices/main?system:run=html/indicators/templates/editApp-definition.xml&Id=1000205&palletId=testtt",
contentType: "text/xml",
success : function(response) {
$("#analyticForm_description").html(response);
}
});
or for the load method use ajaxSetup:
Description: Set default values for future Ajax requests. Its use is
not recommended.
$.ajaxSetup({
contentType: "text/xml"
});
$("#analyticForm_description").load('https://192.168.23.10/SystemServices/...', function() {
MD.ui.editPallets.editform_definition();
});

I was also facing a similar error and upon search i stumbled upon this post, after debugging code for a while i found out the reason.
Error shown in console
XML Parsing Error: undefined entity
Location: path-to-file.html#link3
Line Number 26, Column 29:
Here is why i was getting this error
I was dynamically generating url that i want to hit, and due to some typo i was getting undefined as the url which was used in making ajax calls resulting in this issue
$.ajax({
url: url, //this was undefined
type: "get",
data: data,
contentType: "text/xml",
success: function (response) {
//some code
},
});
Posting this as it might help someone facing the same issue.

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 call fires error event but returns 200 ok

$.ajax({
url: 'http://intern-dev01:50231/api/language',
type: 'GET',
dataType: 'json',
success: function() {
console.log('It Works!');
},
error: function (request,status, error) {
console.log(error);
alert(status);
}
});
Why do this ajax call not work ?? if i call in browser it works fine :/.
This is what fiddler returns:
HTTP/1.1 200 OK
Content-Length: 122
Content-Type: application/json; charset=utf-8
Server: Microsoft-HTTPAPI/2.0
Date: Fri, 26 Apr 2013 06:56:40 GMT
[{"LanguageId":1,"LanguageName":"Dansk"},{"LanguageId":2,"LanguageName":"Tysk"},{"LanguageId":3,"LanguageName":"Engelsk"}]

You have to check ajax response if it is valid or not. When you specify in ajax:
dataType: 'json',
jQuery will fire the error event if the response cannot be parsed as JSON, even if server returns 200 OK. Check the data returned from the server and make sure it is valid JSON (try JSONLint service).
If the returned data is not JSON or it has syntax errors then fix them in your server side code. You can just return {} from the server side script.
Also try this.
$.ajax({
url: 'http://intern-dev01:50231/api/language',
type: 'GET',
cache: false,
complete: function (xhr, status) {
if (status === 'error' || !xhr.responseText) {
console.log(error);
alert(status);
}
else {
console.log('It Works!');.
}
}
});

There is a parsing error since the status shows 200 OK. The problem lies in the datatype:json. To test this, remove the line and it should work. In order to fix this, you can change it to the datatype:text. See this link too for similar question

Check the url parameter and make sure its the same as the loaded page. You might be doing a cross-domain ajax call. If you were wanting to make a cross-domain ajax call, notice that the only dataTypes allowed to make cross-domain requests are "script" and "jsonp".
Ran into this issue in a dev environment where the URL was an IP address and the page loaded a domain-name pointing to that ip.

I know I'm a little late, but I just ran into the same problem and this is one of the top search results on Google. I managed to fix it by moving datatype above url like this:
$.ajax({
type: 'GET',
dataType: 'json',
url: 'http://intern-dev01:50231/api/language',
success: function() {
console.log('It Works!');
},
error: function (request,status, error) {
console.log(error);
alert(status);
}
});

If you are testing locally with a different web app and web API applications , then debug your application and test API send data correctly and app calls to API via AJAX and return data.
since domains are not similar when run application AJAX call doesn't hit to success function. because browser prevents Cross Site request. If you publish both app in local and debug , it's work fine.
hope this would be helpful someone.

Debugging IFrame content

I'm having a problem with a page that works fine by itself, but when it's embedded in a iFrame in a corporate webpage (that I don't control) it chokes in IE9 (but not IE8).
The page uses jQuery to make an AJAX call and KnockoutJS to bind content for display. The page passes parameters in a GET request to my server with responds with AJAX, and it seems that it chokes when getting the data back from the server. The data is correct and correctly formatted, however, when this code executes:
$.ajax({
url: this.serviceURL + parameters,
dataType: 'json',
success: callback,
timeout: 3000,
error: function (jqXHR, status, errorThrown) {
if (status == "timeout") {
error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
}
else {
error("An error occurred while trying to communicate with the server.\n " + errorThrown);
}
}
});
In IE9, I always hit the "An error occurred..." branch with the errorThrown of "SyntaxError: Invalid character", which tells me nothing.
Anybody got any suggestions on how to go about debugging this problem? I used Fiddler to look at what was being sent to and returned by the server, and everything looks fine on that end.
Update: After sleeping on it for a while, I started fresh today. What I've determined is that for some reason, when my page is iFramed, instead of getting the JSON response:
"{"Foo":true,"Bar":true}"
I'm actually getting (from forcing an error in the error handler so I could inspect the state of the jqXHR.responseText) is:
" {"Foo":true,"Bar":true}"
Which if, using the console, I try feeding to JSON.parse, gives me an error. So the question is, where the heck is that leading space coming from? If I run this in Firefox, I see the correct response from the server (no space) and if I run this outside of the iFrame, I see no leading space. So I don't think it's coming server side. Somewhere in the mess of JS running on the parent page and my page, it's inserting a leading space.
Update 2: A closer examination reveals that jqXHR.responseText.charCodeAt(0) is 65279, so it's not actually a space (although it displays as one) it is the byte order mark. But why is it there now (and not before) and why is it causing a problem?

I couldn't figure out the reason for this problem, so I hacked my way around it by adding a custom converter to my ajax call. So I now have this:
$.ajax({
url: this.serviceURL + parameters,
dataType: 'json',
success: callback,
timeout: 3000,
converters: { "text json": HackyJSONConverter },
error: function (jqXHR, status, errorThrown) {
if (status == "timeout") {
//alert("Timed out");
error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later.");
}
else {
error("An error occurred while trying to communicate with the server.\n " + errorThrown);
}
}
});
And my hacky converter looks like this:
function HackyJSONConverter(data) {
if (data[0] = 65279) {
// leading BOM - happens only with an iFrame in OT for some unknown reason
data = data.substring(1);
}
return JSON.parse(data);
}
It's immensely stupid, and I would be delighted if anybody has a better way!

How to handle statuscode 307 redirect with jquery

I'm having a lot of trouble with the 307 Temporary Redirect statusCode using jquery.
I have an apache server that returns a 307 when needed. The 307 is getting thrown properly (I can see this with firebug or a wireshark trace), but I can't seem to get the redirect to trigger.
$.ajax({
url: someURL,
type: 'GET',
processData: false,
data: someData,
cache: true,
timeout: 5000,
statusCode: {
307: function() {
alert('307'); // this does NOT get called
}
},
error: function(request, status, error){
try {
console.log(request.getAllResponseHeaders());
}
catch (err) { }
},
success: function(data, textStatus, response){
try {
console.log(response.getAllResponseHeaders());
}
catch (err) { }
});
I wanted to check out the headers so I could redirect using the getAllResponseHeaders() method. This works fine for 200's but the 307 never triggers (in the success nor error handler)
One thing I noticed when using Firebug to examine the traffic is that right after the redirect an ajax GET is sent to the server with the url of the redirect! This results in a failure however.
So, what gives?
Edit:
I tried this with jquery 1.5.1 and 1.6.1

Well, I did some more research and it appears that a 307 is automatically handled by the browser, and is not able to be intercepted by jquery.
I ended up using a different statusCode to do the redirect (410 Gone).
This probably isn't the best solution, but I don't have access to the apache server code.