How to use jQuery Migrate plugin

Asked 19/2, 2014 at 14:0 Answered 8/7, 2015 at 15:51

I'm using jquery 2.0 but would like to also use the jQuery migrate plugin so my website will work on older browsers. However, I've been unsuccessful at getting it to work. I have the following in the header section in my html.

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <script src="/Scripts/jquery-2.0.3.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

The compatibility meta tag is so I can test this on my computer (which has IE 11). I don't have a computer with an older IE. Anyway, this is giving me javascript errors such as:

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'addEventListener'

The jQuery migrate guide (https://github.com/jquery/jquery-migrate/) seems to just say to include the migrate plugin after including jQuery. What am I doing wrong?

EDIT

I found my local jquery.js file must be corrupt or maybe the nuget package I got it from has a bad version of it. Since that error goes away when I include jquery directly from code.jquery.com.

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

However, my scripts give an error. Here's an example script

function HighlightSelectedRow(tr) {
    $("#TableSummary tr").removeClass("HighlightedRow");
    tr.className += " HighlightedRow";
}

It gives the following error

0x800a138f - JavaScript runtime error: The value of the property '$' is null or undefined, not a Function object

Thanks

Antimalarial answered 19/2, 2014 at 14:0 Comment(5)

i think that should be used with 1.9+ but not with 2.0 – Berar 19/2, 2014 at 14:2

@Berar I thought so too at first but apparently 2.x is supported with JQM: "It can be used with either jQuery 1.9 or jQuery 2.0 to provide diagnostics and remedial help" (source) – Osteoporosis 19/2, 2014 at 14:4

Scott: try putting jquery migrate script call immediately after your jQuery script call rather than having the other scripts in between. – Osteoporosis 19/2, 2014 at 14:5

The 3 jQuery plugins included right after jQuery depend on jQuery being correctly loaded, but without jQuery-migrate, it won't be, so yeah, just move the jQuery-migrate up 3 lines. – Wina 19/2, 2014 at 14:9

Sorry, I wasn't clear. The error was for a line in jquery-2.0.3.js. Not any of the following files. I did some playing around and found if I included jQuery directly from code.jquery.com I don't get an error in that file. I commented all the other includes as they aren't needed for jquery. However, attempts to use jQuery is giving an error. I'll update my question with the details. – Antimalarial 19/2, 2014 at 14:38

May be you should reorder the js stack:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
</head>

Berar answered 19/2, 2014 at 14:5 Comment(0)

Change the order of the include jquery migrate script

Wheeler answered 25/4, 2014 at 8:2 Comment(0)

Not likely it was a file corruption, just an incompatibility with jQuery 2.x and IE 8. If you need IE 8 compatibility, use the 1.x series.

This applies even if you are running IE 10 (and I would assume newer). In my case, I had a few PCs with Tools / Compatibility view settings / Display Intranet sites in compatibility view checked. So, it worked fine in Visual Studio on my local PC, but when I "published" to an in house server for the next layer of testing, SPLAT. Some PCs crash and burned, while others were fine.

The jQuery download site gives this warning.

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. ... Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site.

For those that want to force IE out of compatibility mode,

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

can be added at the very top of your master page.

Edit

This code will call the correct version of jQuery for older IEs. It will load 1.x for IE 8 and for 10 in compatibility mode. This can be added in combination with or as a replacement to the Meta value above.

<!--[if lt IE 9]>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!--<![endif]-->

Unify answered 22/4, 2014 at 21:58 Comment(1)

or just "" instead of "" because "Support for conditional comments has been removed in Internet Explorer 10" msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx – Wallywalnut 10/9, 2014 at 10:43

Turning off compatibility mode on IE worked for me.

Orford answered 8/7, 2015 at 15:51 Comment(0)

Recommended topics

Hot tags