espresso_coffee espresso_coffee - 11 months ago 239
jQuery Question

IE11 JQuery error?

I have code that works fine in Firefox and Chrome but not in IE 11. I'm getting next error messages:

1) SCRIPT5009: '$' is undefined
For this line of code:

2)SCRIPT5009: 'jQuery' is undefined
// Browser globals
factory( jQuery );

3)SCRIPT1010: Expected identifier
.catch( function( error ) {
jQuery.readyException( error );
} );

Here is my header tag with all includes:

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/JQuery_alert.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I found that if I open my dev tools in IE and then in the upper right corner click on the Document mode and switch to Edge my code with all the includes above works fine. So my question is what is Edge? How I can make sure that someone else using IE will not have the problems running my page? Is there the way to fix that? Thanks in advance.

Answer Source

Compatibility View

When Internet Explorer runs in compatibility view, it emulates IE8 which is incompatible with the latest version of jQuery (only the 1.x versions of jQuery are compatible with older versions of IE). You can manually verify your document mode in the F12 Developer Tools by making sure it's set to Edge.

Checking if Compatibility View is the Problem

When you hit F12 in Internet Explorer, it should bring up the Developer Tools. Near the top right of the toolbar, you should find a drop down that lets you switch between Edge, 10, 9, 8, 7, and 5. Switching it will cause the page to refresh using the new document mode. If you switch to Edge and you still get the jQuery errors, then you can rule out compatibility view as the problem.

Making sure the page won't be displayed in Compatibility View

Check the documentation here regarding specifying document modes for Internet Explorer:

You can also try to force IE11 to display in Edge mode by inserting a <meta> tag into the Header of your HTML (it should be the first tag within the Header) like so:

    <meta http-equiv="x-ua-compatible" content="IE=edge">

This instructs Internet Explorer to explicitly use that document mode.