ASP.NET MVC 4 jQuery Validation Script Bundle Not Working

Question

I have recentely upgraded a website to use ASP.NET MVC 4 and have the following code to render my jQuery validation bundle.

But I get the following error:

Microsoft JScript runtime error: Object doesn't support property or method 'live'

And this error when clicking in a text box:

Unhandled exception at line 1234, column 5 in http://localhost:13112/Scripts/jquery.validate.js

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'call': object is null or undefined

My bundle code:

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

My _Layout.cshtml code:

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

Here is my rendered HTML:

<link href="/Content/site.css" rel="stylesheet"/>

        <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.resizable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.selectable.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.accordion.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.button.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.dialog.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.slider.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.tabs.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.progressbar.css" rel="stylesheet"/>
<link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>

        <script src="/Scripts/jquery-1.9.0.js"></script>

        <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

        <script src="/Scripts/jquery-ui-1.9.2.js"></script>

        <script src="/Scripts/modernizr-2.6.2.js"></script>

Can someone point out why this error might be occurring?

Thanks, Alex.

did your check if bundles/jquery is the first rendered? Make sure that it is loaded before any library — Jobert Enamno, Jan 16 '13 at 11:41
Added the rendered HTML to the question, can you see anything off in there? — Alex Hope O'Connor, Jan 16 '13 at 12:12

Magnus Johansson · Accepted Answer · 2013-05-06T21:39:06.627

49

The .live method has been deprecated in jQuery v1.7+ and removed in jQuery v1.9+.

Bugreport: http://bugs.jquery.com/ticket/13213
Explanation: http://jquery.com/upgrade-guide/1.9/#live-removed

.live() removed

The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead. To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn). For more information, see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.

How to fix: Download the jquery migrate plugin and add it to your bundling:

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
              "~/Scripts/jquery-{version}.js",
              "~/Scripts/jquery-migrate-{version}.js"));

Update: The migrate plugin is now available from Nuget as well:

PM> Install-Package jQuery.Migrate

edited May 06 '13 at 21:39

answered Jan 16 '13 at 11:43

Magnus Johansson

28,010
19
106
164

Ah it is adding that, was not aware that it should not be there. However I am getting another error (added to question), can you possibly tell me what is causing it as well? – Alex Hope O'Connor Jan 16 '13 at 12:13
O that is not being added manually, that is the result of Scripts.Render() – Alex Hope O'Connor Jan 16 '13 at 12:23
Oh, sorry, it was a more delicate reason... see my completely new answer. – Magnus Johansson Jan 16 '13 at 15:39
Ah so are we just waiting for Microsoft to update its other scripts to work with the new jQuery? – Alex Hope O'Connor Jan 16 '13 at 20:46
You may want to include the jQuery Migrate library which will give you warnings about using depricated or removed items from the api in yoru coddebase. https://github.com/jquery/jquery-migrate/ – Jerry Jan 18 '13 at 19:51
1

In lieu of adding jquery.migrate -- I went in jquery.unobtrusive-ajax.js and replaced all .live to .on, then the error went away. However, got an error in jquery.validate.js using .call (line 1234). Back to migrate. – Rob Koch Jan 22 '13 at 22:57
1

Good answer, I think it's worth editing and changing to jquery-migrate-{version}.js though as it's already on 1.1.0 – user1166905 Feb 01 '13 at 22:46
And jquery.unobtrusive and jquery.validate have been updated now so upgrading them should work too. I downloaded the NuGet packages dated 18 Feb 2013, Version 2.0.30116.0 and that worked for me. – Colin Mar 11 '13 at 17:32
I added jquery-migrate via nuget but still needed to do the bundles.Add fix manually. Works now though. – Ben Power Sep 20 '13 at 01:30

ASP.NET MVC 4 jQuery Validation Script Bundle Not Working

1 Answers1

Linked