jQuery and Browser Compatibility

Question

Yikes! I've been a developer for many years and have always tried to emphasize code that is compatible with as many systems as possible.

Recent, I purchased the book jQuery in Action and started reading it. I am very disturbed by the fact that the included source code doesn't appear to work correctly on either of the browsers on my current computer.

Specifically, I downloaded the book's source code and selected the "jQuery Selectors Lab" for Chapter 2. But it doesn't look how it does in the book.

On Google Chrome, both the DOM Sample and DOM Sample Code panes are completely empty. On IE7, things appear much closer to how they appear in the book. But the source code in the DOM Sample Code pane is all on one line (which extends to the right, off the page). Note that the screenshots in the book are of a browser running on the Mac.

I'm curious what sort of cross-browser compatibility users more experienced with jQuery are finding, and what this revelation means for developers who like to be as compatible as possible and are planning to use jQuery.

• DA.: One of the primary reasons for using jQuery is that it handles a lot of the cross-browser compatibility issues for you. The particular code you are working that's failing in certain browsers has more to do with that particular code than the jQuery framework.
• Jonathan Wood: @DA: Yes, that is why I'm interested in jQuery. However, the authors are extremely qualified. If they can't write compatible code with jQuery, what chance do I have?
• DA.: jQuery handles (most) of the browser issues. So, the fact that the code you have isn't running really has nothing to do with the jQuery library itself. Even MS uses jQuery now in asp.net so I wouldn't worry.

Answer 1

jQuery is actively supported in all these browsers:

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

There are known problems with outdated browsers as per the list below:

• Mozilla Firefox 1.0.x
• Internet Explorer 1.0-5.x
• Safari 1.0-2.0.1
• Opera 1.0-9.x
• Konqueror

jQuery generally works with Konqueror and Firefox 1.0.x, but there may be some unexpected bugs since we do not test them as regularly.

If you are using any of the outdated browsers, then this could be your problem, otherwise, you should post your code here on stackoverflow to get help. It may not be the browser causing the problem, but it could be the way code is written or executed.

• Jonathan Wood: Being supported (even actively) is not the same as producing consistent results. The reason being highly compatible is important to me is because I can't dictate which browsers my users will use. Note that, in the case of Chrome (the one with the most problems), I'm running the very latest version.
• Hussein: It's hard to tell what problems you are having without posting an example.
• Jonathan Wood: I'm not sure what you had in mind. I posted a link to the code I'm looking at.
• Hussein: I downloaded the zip file and looked at the example you referred to. The code is using get(). If you are on Chrome, then this has to do with permissions issues pointing to local files. It's been discussed many times on stackoverflow. You can resolve this by uploading your files to a live production server, or try to run it on Firefox. Check out the following link on how to resolve permission issues with chrome when working from localhost. robspangler.com/blog/jquery-load-doesnt-work-in-chrome

Answer 2

I think part of your problem is that you're accessing something from the file system that is meant to be loaded from a web server. For example, I see this error in Chome on your chapter 2 example:

XMLHttpRequest cannot load file://...chapter2/dom.sample.html.
Origin null is not allowed by Access-Control-Allow-Origin.

Things seem to be behaving reasonably well in Chrome other than that sort of thing.

I usually target IE[789], Chrome, Firefox, Safari, and Opera and I haven't seen many browser issues that are specific to jQuery or jQuery-UI. The problems are mostly CSS issues and certain JavaScript problems (in IE for both) that aren't jQuery problems.

• Jonathan Wood: Well, it's not my example. Unfortunately, I don't know enough about this to see why the error you posted would be specific to a website loaded locally.
• DA.: Jonathan...are you loading the pages from a local web server, or a local file system? There's a big difference there.
• mu is too short: @DA: I'm pretty certain he's loading them from the local FS, hence the AJAX not working in Chrome and the generally messed up results he's seeing.
• Jonathan Wood: @DA: Yes, I'm loading them locally.
• DA.: locally...what? File system or server? If you're just loading them from the file system, then, as stated, that's likely the issue.

Answer 3

I wouldn't be overly worried about the cross-browser compatibility of jQuery so much as I would the quality of the code in the case of this book. I haven't personally looked at this book so I can't make a personal judgement; however, I am the lead developer for a web application that currently has around 15,000 users and we have been confidently using jQuery for a couple of years now with no issues. We have to support customers on a number of platforms using all of the major browsers that are on the market. When jQuery code is written properly and tested for all environments, it can absolutely work properly regardless of what browser you are using.

• Jonathan Wood: Well, that' encouraging I guess. However, the book authors appear well qualified. One of them is directly involved in the development of jQuery and related plug ins. And the forward is a glowing review written by John Resig, the creator of jQuery. If they can't get it right, how is someone new to jQuery going to?

Answer 4

Version 3 of jQuery is maintained for the following desktop browsers :

• Chrome: (Current - 1) and Current
• Edge: (Current - 1) and Current
• Firefox: (Current - 1) and Current
• Internet Explorer: 9+
• Safari: (Current - 1) and Current
• Opera: Current

It is also maintained for the following mobile browsers :

• Stock browser on Android 4.0+
• Safari on iOS 7+

Source : https://jquery.com/browser-support/

Answer 5

Code samples appear to use outdated jQuery v1.4. Download latest version and check known issues for more details about cross-browser compatibility.

Answer 6

I don't know why but if I copy whole example directory to the tomcat/webapps, it works fine. But if I open page (lab.selectors.html) directly from the browser, it doesn't display dom sample section. The error message from the firefox console was like this:

[16:56:36.335] junk after document element @ file:///C:/JavaScript/jqia2/chapter2/dom.sample.html:2