I recently refactored some ajax code to make it asynchronous. It was working perfectly before, but I wanted to use jQuery promises, so I jQuerified it. Now, however, the ajax call works in every browser but IE.
IE9 throws the error where the ajax function is assigned a variable name. The error in IE is:
"Object doesn't support this method or property on line 99."
Here's a chunk where the error occurs:
if (screen.width > 525 && svgSupported) {
$loadingSvg = $.ajax({
type: 'GET',
url: 'images/mypicture.svg',
dataType: 'xml',
success: function(data){
console.log("Ajax request successfully returned: " + data);
console.log(data);
},
error: function(data){
console.log("Ajax request failed: " + data);
}
});
}
I've tried some obvious things other people in similar situations have suggested on SO, like wrapping everything in jQ $(document).ready. That doesn't fix it. The $loadingSvg variable is declared globally at the top of the script, so that ain't it. Any ideas, folks?
The issue is actually your console.log line:
console.log("Ajax request successfully returned: " + data);
More specifically, IE can't seem to concatenate an XML document with a string, or indeed XML anything with a string. They don't support .toString(). Just remove that part and continue working :)
Related
this is the below code which i am using for delete functionality.At Server side there is RestAPICall. But i can see the request is not at all going to back-end and neither i am getting any error in IE.It's working in FF,Chrome but not in IE9.
var delURL = "url call to restful webservices";
$.ajax({
type: "DELETE",
url:delURL,
contentType: "application/json",
data: sendUserData(),
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (data) {
console.log("inside error method->" + data);
}
});
var sendUserData = function(){
return JSON.stringify(userData);
};
Everytime when i am trying to delete some records there is no request is going to back-end, instead immediately the alert statement in error method will get executed.
I had tried and googled some blogs. But not able to get the solution.
Before marking duplicate Let me list down what all i tried:-
1.IE does not support JSON object (e.g.: JSON.stringify()) but the json2.js plugin should compensate for that, and I see that is included in my code. So I have not found the answer yet why still not working.
JSON.stringify and JSON.parse not working in IE9?
JSON.stringify does not work in IE
2.I also read that Jquery.Ajax with delete method not working in IE.
Problem with jQuery.ajax with 'delete' method in ie
I am having a problem with one of my AJAX requests. All of this was working earlier, then I moved some files around in folders, and it must have broken something, but I have been unable to figure out what may be wrong with my pathing.
What is happening
AJAX request seems to be being ignored, nothing goes to console or the network tab, responseText is "", and I put a break point in the first line of the PHP which is never hit. It goes straight from $.ajax to the first line in my error callback. Additionally, when this PHP code is called by going straight to the page, or cron, it works fine.
I have a very similar call later to another file in the same folder that is working just fine.
What I have tried
As mentioned before, I have looked at responseText, console output, network tab, and breakpoints in my PHP (which are never reached), and I have looked around Google and stackoverflow. If I intentionally change the name to a non-existing file, I promptly get an error in the console.
Code below
$.ajax({
type: "POST",
url: "PHP/myFile.php",
data: '',
success: function () {
//Success code
},
error: function (xhr) {
var response = xhr.responseText; // response is ""
//Error code
}
});
Any ideas?
Here is the code, later in the file, which (successfully) grabs code from a file in the same folder.
$.ajax({
type: "GET",
cache: false,
url: "PHP/myOtherFile.php",
dataType: 'json',
success: function (data) {
// Success code
},
error: function () {
// Error Code
}
});
Pretty basic AJAX calls, not sure what is going on :/
Error callback is called on http errors, but also if JSON parsing on
the response fails
From: Jquery ajax error callback
From your working file, the code dataType: 'json' im blindly assuming your doing some kind of json parsing.
Try just making the "myFile.php" a simple echo 'x'; script, and check the response text. If your get something, then its because your script contains JSON parsing code, but your not passing any data to the script anyways.
Hence, the error callback would be called because the script is trying to JSON parse nothing (i.e. data: '')
I cant suggest anything else, from reading your questions description, hopefully someone else figures it out. goodluck
My calls to $.post are not working all over my code. I'm not sending the request to other domains and, actually, I'm doing everything localhosted. My localhost alias was automatically defined by the Mac OS X 10.8 as ramon.local and I'm requesting from http://ramon.local/linkebuy_0.7/resourceX to http://ramon.local/linkebuy_0.7/resourceY. There are no errors on Chrome's console.
The server side doesn't receive the request and I can check it by accessing directly from the browser (typing the URL).
It's not just one call that is not working, none of them are. They were all working days ago and I'm suspicious that I accidentally changed something on my local settings. What could it be?
Here's an example of what I'm facing:
$.post(
<<CORRECT URL INSIDE THE DOMAIN>>,
{},
function(response) {
console.log('THIS SHOULD BE PRINTED ON CONSOLE');
alert('THIS SHOULD BE POPPED UP');
}
);
I don't get the alert, neither the console message while running the code above. So I tried the following:
$.support.cors = true;
$.ajax({
url: "http://ramon.local/linkebuy_0.7",
dataType: "json",
type: "GET",
crossDomain: true,
success: function (data) {
console.log(data);
},
error: function (xhr, status, error) {
alert(error + " - " + status);
}
});
I just came with $.support.cors = true; and crossDomain: true to check if it was a cross domain issue. So I was alerted No Transport - error same way as before.
What can I do to solve that?
Thanks in advance.
Try this and see if you are getting any alert:
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("your url", function() {
alert("success");
}).success(function() {
alert("second success");
}).error(function() {
alert("error");
}).complete(function() {
alert("complete");
});
// perform other work here ...
// Set another completion function for the request above
jqxhr.complete(function() {
alert("second complete");
});
Well, I solved the problem in a very strange way.
I deleted the JQuery file and downloaded it again, replacing the old one. Happens it worked out.
So, if you're:
Making AJAX requests that are not cross-domain;
Using JQuery for it (e.g. $.post, $.get, etc);
Getting No Transport AJAX error
Then re-download and replace you're JQuery source.
Else, if you're making cross-domain requests (not this case), then look for JSONP and try to set $.support.cors = true; at the beginning of you're code.
Thanks everyone for the comments and answers.
OK I'm using PHP and the Facebook JS API to post stories on users' pages with jQuery's $.ajax() function and it's working fine everywhere except in Chrome.
Chrome is returning the error "SyntaxError: Unexpected Token : ".
I have it alerting the XHR response on error and it is as follows:
{
"id" : "30800681_37922830145443"
}
which is valid JSON. It can't be anything I'm doing wrong with the JSON result because it throws the error before any parsing can be done (i.e., it's not making it into the 'success' function).
The code that's behind this is as follows:
if ($('#post-facebook').is(":checked")) {
// Do the FB post
$.ajax({
type: "POST",
url: "https://graph.facebook.com/<?= $this->session->userdata('fb_id') ?>/feed",
data: "message=" + $("#upload-caption").val() + "&access_token=<?= $this->session->userdata('fbtoken'); ?>&app_id=<?= $this->config->item('appId') ?>&link=" + post_url,
success: function(msg) {
// Save the FB post ID to the DB
var result = $.parseJSON(msg);
var result_array = result.id.split("_");
// Do more stuff here, but it's not even getting into this success function
},
error: function(xhr,ajaxOptions,thrownError) {
// This is what's executing because the thrown error is getting alerted
alert(thrownError);
}
});
}
When I add dataType: "json" in the Ajax parameters, it still goes through the Error function but the thrownError parameter is empty.
I am pulling my hair out...any suggestions? Thanks in advance,
Using jQuery with post is not possible as POST require CORS support, and that is not readily available.
Use FB.api instead, which handles all of this for you, in a much better way.
My problem happens to be the error, I am attempting to produce an error, in this case the error being hiding the loading symbol and showing a refresh button in order for the user to reload the page to see if the data loads this time.
$(document).ready(function () {
$('#busy').show();
$(document).bind('deviceready', function () {
var today = $('#todaysong');
$.ajax({
url: 'my url',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function (data, status) {
$.each(data, function (i, item) {
var song = '<name>' + item.name + '</name>' + '<artist>' + item.artist + '<br></artist>';
$('#busy').hide();
today.append(song);
});
},
error: function (error) {
$('#busy').fadeOut();
$('#reload').fadeIn();
}
});
});
});
This is my code, could someone advise on what I am doing wrong, I've tried a few things and cannot seem to get it to work, also would I make it so said button was able to refresh this individual piece of code?
Thanks a lot.
In order to debug your code:
Are you generating an error on your own? Is it really an error? Track your request via Firebug or ...
Be sure about running the error function. Again try Firebug or such things to set break points.
Check the JavaScript console for being sure there is no any of damn JavaScript error. And again Firebug error console.
Without seeing other details it is difficult to suggest.
Still I'm trying.. Check the IDs of the elements you have mentioned is same as they are in HTML. Check in HTML that one id is not assigned to more than one element.
In the AJAX code remove jsonp: 'jsoncallback', for a while and test if it is working.
error(jqXHR, textStatus, errorThrown)
A function to be called if the request fails. The function receives
three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a
string describing the type of error that occurred and an optional
exception object, if one occurred. Possible values for the second
argument (besides null) are "timeout", "error", "abort", and
"parsererror". When an HTTP error occurs, errorThrown receives the
textual portion of the HTTP status, such as "Not Found" or "Internal
Server Error." As of jQuery 1.5, the error setting can accept an array
of functions. Each function will be called in turn. Note: This handler
is not called for cross-domain script and JSONP requests. This is an
Ajax Event.
Where the important part in this case is;
Note: This handler is not called for cross-domain script and JSONP
requests.
Quote from the API documentation of jQuery.ajax.
You should instead be using jsonpCallback.