why ajax error is different in IE and Chrome? - javascript

Lets take example of the following code below.
<script>
function abc()
{
$.ajax({
type: "GET",
url: "https://zx/abc/def",
timeout: 6000,
dataType: "jsonp",
error: function(h, j, e) {
console.log(h+" "+j+" "+e);
}
})
}
</script>
<button onclick="abc()">Start Call</button>
The url used above is a non-existant/invalid one. Now lets see whats the output of the above code in different browsers:
Chrome,firefox, IE 11 -> [object Object] timeout timeout
IE 8,9,10 -> [object Object] parsererror Error: jQuery111308894510177821542_1433915740650 was not called
So the question why we get different error messages?

Where do we start on this.
Do we target the answer to first time ajax programmers, or to very experienced programmers? - and what is actually being asked here?
The simple answer is obvious. The browsers are different, so they react to an error in different ways, which propagate to jquery, and finally results in two different error messages.
Since jquery wraps the very browser depending javascript engines, it will not always be able to behave in a fully crossbrowser way.
However thats really not what you are asking now is it?
You probably want to know what's going wrong..
One browser states that you have a timeout, the other that the browser is unable to parse the recieved data, and fails to call a jquery function, that is reponsible of doing so...
you may want to read this related question:
Callback - Parseerror JSONP via jQuery AJAX
The most probable cause IMHO is that the the data you are recieving from the server is not actually of the type jsonp.. or it is incomplete, or broken.
It may be text? or xml? or just plain and simple json.
try changing the type to text, and see if the error messages change.
but... why does chrome not give the same error as IE?
well, if I'm right about the data not actually being proper jsonp, it could be related to what happens when jquery "parses" json.
Jquery will use the browser built in methods (when available), a probable reason is that chrome is used to parse the data, but when something goes wrong, it times out
where can I get documentation?
So many places have bits and pieces of the documentation required to understand this. To explain this genericly for all kinds of data, and possible errors, refer to the Jquery source code, and the javascript engine documentation for I.E and Chrome respectively.
It can take a long time to read, since the behavhior is different for different versions of I.E and Chrome. In the old days we had to learn this just to make the simplest crossbrowser things work. Jquery hides most of the differences, and this is my best bet on the succes of jquery. We no longer need to know all those subtle differences. We just need to know where to look when something goes wrong..
A good place to start is here: http://api.jquery.com/jquery.parsejson/
Where the browser provides a native implementation of JSON.parse,

Related

Programatically retrieve count of javascript errors on page

I'd like to write a test case (using Selenium, but not the point of this question) to validate that my web application has no script errors\warnings or unhanded exceptions at certain points in time (like after initializing a major library).
This information can easily be seen in the debug consoles of most browsers. Is it possible to execute a javascript statement to get this information programatically?
It's okay if it's different for each browser, I can deal with that.
not so far read about your issue (as far as I understood your problem) here
The idea be the following:
I found, however, that I was often getting JavaScript errors when the page first loaded (because I was working on the JS and was introducing errors), so I was looking for a quick way to add an assert to my test to check whether any JS errors occurred. After some Googling I came to the conclusion that there is nothing built into Selenium to support this, but there are a number of hacks that can be used to accomplish it. I'm going to describe one of them here. Let me state again, for the record, that this is pretty hacky. I'd love to hear from others who may have better solutions.
I simply add a script to my page that will catch any JS errors by intercepting the window.onerror event:
<script type="text/javascript">
window.onerror=function(msg){
$("body").attr("JSError",msg);
}
</script>
This will cause an attribute called JSError with a value corresponding to the JavaScript error message to be added to the body tag of my document if a JavaScript error occurs. Note that I'm using jQuery to do this, so this specific example won't work if jQuery fails to load. Then, in my Selenium test, I just use the command assertElementNotPresent with a target of //body[#JSError]. Now, if any JavaScript errors occur on the page my test will fail and I'll know I have to address them first. If, for some strange reason, I want to check for a particular JavaScript error, I could use the assertElementPresent command with a target of //body[#JSError='the error message'].
Hope this fresh idea helps you :)
try {
//code
} catch(exception) {
//send ajax request: exception.message, exception.stack, etc.
}
More info - MDN Documentation

jquery .load() not inserting data in ie8 and below

I've been looking for a solution all day, but I'm still seeing this error.
It's a Expression Engine setup for a client of ours and we want to implement ajax-navigation. For this we are using the default $.load() function and this works perfectly in ie9, FF, Safari, Chrome, Opera... but it doesn't work in ie8 and below.
I've tested the callback function, that one IS being called, the data is send, I can read it in the console when logging it. But for some odd reason the data isn't inserted.
Here is the code:
load_page: function(url, func){
$('#content').load(url+' #content>div', function(data, textStatus, jqXHR){
console.log('page loaded!');
});
}
There was a whole bunch of extra code in the callback function but I've been cleaning out the whole javascript/css everything. In search of bugs but nothing to be found.
Based on the comments I decided to add the url and a download:
The site this problem is found in: http://www.track.be/devo_9836/nl/ee.php
A packet of files, with the problem: http://stijnd.be/ie8_load.zip
Another piece of the puzzle:
There is something weird going on in the javascript. Even the google maps api doesn't function properly, that's the first time this happened to me when using the google maps api.
EDIT : Answered
I finally found the answer to this question, thanks to #epascarello. It is in fact the fault of the data I was trying to import. Because IE8 & below don't understand HTML5 they will try to import the elements into the dom, but when alerting the data I saw the following: [object HTMLUnknownElement], [object HTMLUnknownElement], [object HTMLUnknownElement],...
When I changed the markup of the data to use good old div's instead of article-elements, everything worked fine!
I had the same problem and I noticed that if the url returns invalid HTML (eg. extra end tag) it can stop it from loading or finding the correct element.
In my example all I had to do was correct the HTML from the URL and then it worked correctly.
ajax requests are cached in IE8, so just a little magic of
$.ajaxSettings.cache = false;
before the using load function
http://zacster.blogspot.in/2008/10/jquery-ie7-load-url-problem.html
http://api.jquery.com/jQuery.ajax/
cache (default: true, false for dataType 'script' and 'jsonp')
Type: Boolean
If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
The only thing I can see wrong with this code is you are missing a closing bracket
load_page: function(url, func){
$('#content').load(url+' #content>div', function(data, textStatus, jqXHR){
console.log('page loaded!');
} // <-- this one
});
$.load() works in IE8. My guess is you have a previous JS error, triggered only in IE8-, which prevents it from functioning properly, or being called altogether.
The problem is some functions are supported in one and not the others. For example one of my personal hates is how innertext is only supported in ie7,8 but not fox or chrome. Here is the compatability chart if you are interested http://www.quirksmode.org/dom/w3c_html.html .
Bottom line, unless you plan on changing the plugin yourself and you've already tried modernizer and that didn't help, you are going ot have to use another method of loading data. My suggestion is to use .html, you can not go wrong with that, or append and hand form the html yourself in the js. Simpler is always the best solution.

Getting data from the browser's console using javascript

I don't know if this has been asked before, but what i'd like to be able to do is get data from the error console within the browser itself(if it supports it) this would be for when a user sends off a bug report it'd pull up any errors related to pages at my website for things such as typos in code and other things that somehow managed to slip by. Also, in that regard is there a way to pass the errors from the console to a useable format? If this isn't possible, then i could just tell them to copy and paste what came up from the site itself.
I thought of this right now as i was thinking about how to make the bug reporting system run better since the entire thing is basically ran within the browser and for the backend I can easily just look at error logs but for the frontend ie javascript bits of things it's not goign to be as easy.
So to finish wrap all of this up in one little statement, is there an easy way to get the data from the error console and be able to send it along via javascript ie to a form, or something similar.
You can use the onerror event in JS to get the details of the error. Hoptoad do this for example and log the errors to their console, Their code re-uses lots of nice JS scripts including a printStackTrace function that is great.....
You can see how they do it here:
http://hoptoadapp.com/javascripts/notifier.js

a strange $.get()

I have this code, a simple jQuery GET:
$.get(url, params, function(){
function_call()
})
I wonder why the function_call() is never executed. The server at url is up and running and changing the function to $.ajax() shows no errors (the error option is not executed), but it's not working.
Any clue? params is a simple JS object of two fields, and of course I've used $.get() thousands of times with no problems.
Based on the information you've given (and the documentation), it should be working. Are you absolutely sure you're actually calling it (the $.get)? Can you create a minimal, self-contained example of the problem? (That does two things: 1. It usually helps you solve the problem yourself, because you figure it out in the process; 2. It gives us more to work with. :-) )
Alternately, anomareh mentioned (in a comment) the Same Origin Policy, which you might be running into.
Your syntax looks good. When something like this doesn't work for me, it's because I have a silly mistake at some other point, like a syntax error in the callback function or formulating the URL etc.
We would need to see a little more of your process to help more. Try making you're callback function only do a simple alert. Have an alert right before the $.get() is called, ideally spouting the URL. If you control the server functionality, put a breakpoint there (or whatever you need to do) to make sure the call is getting there. Switch back to $.ajax() and see if you get the error callback function called if you switch the URL to something bogus.
I guess I make so many dumb mistakes with my javascript/jquery, that I'm good with debugging ideas. :)
Have you tried a semicolon after function_call()?
The only other thing I would try is $.get(url, params, function_call) --- this will work only if your function call has no params -- take note that function_call intentionally does not have () after it.

Ajax problem using MooTools/jQuery - p.onStatusChange is not a function

I get the following error in firebug in Firefox 3 with both MooTools and jQuery:
"p.onStatusChange is not a function".
I've noticed this error frequently in firebug since one of the latest updates of FF3. However, it has started appearing with code that hasn't been changed in some time and that was not reporting errors previously. The errors happens when ajax results are returned. It shows up in different applications that use separate javascript libraries, MooTools and jQuery.
Does anyone have any idea why these errors are appearing? My intuition tells me that it is something in Firefox that changed, but I can't find any information online currently. The ajax calls still work fine, but I am wary of just going with my intuition and leaving script errors in my code.
Thanks,
Jason
I get it in tabBrowser instead:
chrome://browser/content/tabbrowser.xml
(4) errors occur:
p.onStatusChange
p.onProgressChange
p.onStateChange
p.onSecurityChange
What I found was that the add-on "PDF Download" was causing these errors. The best way for me to check was to go to a page that produced the errors, turn off all the add-ons, and turn them on one-by-one (starting with Firebug). Instead of going one-by-one, I actually turned them on in lots of 3 to help identify the problem sooner.
Here is the reference for the function NsIDownloadProgressListener. It looks like it has been deprecated.

Categories