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
– Jobert Enamno, Commented Jan 16, 2013 at 11:41
Added the rendered HTML to the question, can you see anything off in there? — Alex Hope O'Connor
– Alex Hope O'Connor, Commented Jan 16, 2013 at 12:12

Magnus Johansson · Accepted Answer · 2013-05-06 21:39:06Z

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 6, 2013 at 21:39

answered Jan 16, 2013 at 11:43

Magnus Johansson

28.4k19 gold badges110 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Alex Hope O'Connor Over a year ago

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 Over a year ago

O that is not being added manually, that is the result of Scripts.Render()

Magnus Johansson Over a year ago

Oh, sorry, it was a more delicate reason... see my completely new answer.

Rob Koch Over a year ago

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.

user1166905 Over a year ago

Good answer, I think it's worth editing and changing to jquery-migrate-{version}.js though as it's already on 1.1.0

|

Collectives™ on Stack Overflow

ASP.NET MVC 4 jQuery Validation Script Bundle Not Working

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related