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.

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.

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.