Unobtrusive Ajax stopped working after update jQuery to 1.9.0

Question

I have just updated jQuery & jQuery UI to: jquery-1.9.0.min.js and jquery-ui-1.9.2.min.js

And... all my unobtrusive Ajax calls (Ajax.ActionLink, Ajax.BeginForm) stopped working properly - they open results in a new page instead of updating the existing div.

And I get this javascript error in Firebug when my page loads:

Code hasn't changed of course, just updated the jQuery scripts using Nuget.

Anyone experienced the same problem ??

Hallerson

I've seen the same problem. I'd recommend downgrading jquery back to 1.8.3 until there's an update to jquery unobtrusive validation. – Regurgitation

Answer 1

.live() has been deprecated since 1.7 and was officially removed in jQuery 1.9. Use .on() instead as it is the preferred method of doing the same thing.

Expectation

Actually .delegate() is deprecated too :-) Now what you want is .on(). – Authors

@Authors AH... they hid that info on the sidebar. I'll fix my answer. – Expectation

Thank you guys. I see. But the point is - this is MVC3 application with no manually-writte javascript code. I am not sure what this ".live()" is. Is that in jquery-1.9.0.min.js, jquery-ui-1.9.2.min.js, or jquery.unobtrusive-ajax.min.js. So sad, they keep changing things all the time, so that dependent javascritp libs stop working. – Hallerson

Ok, I found, it's in jquery.unobtrusive-ajax.min.js. I changed all .live( to .on(. But id still DIDN'T WORK :( – Hallerson

@Sigourney_Weaver The implementation for using .on() is differnet from you how would call .live(). Check [the documentation][1]. – Expectation

I need to say what I dont intend to make any manual changes to existing JS libraries. That would be just wrong. The issue is compatibility of one library with another. We have jquery lib and jquery unobtrusive ajax lib, which is used by MVC. I cannot and will not manually change jquery unobtrusive ajax lib to match the new version of jquery lib, in production environment it's extremely dangerous and messy. Anyways, that was more a rhetorical question. Just gives me a headache the fact of JS lib dependent on another javascript lib, that changes independently and breaks the functionality. – Hallerson

@Sigourney_Weaver I see your predicament. It is actually a good thing .live() was deprecated and removed. It has been known to be deprecated for quite some time, and there was plenty of warning that it was slated for removal. It is a method which is rather bulky and can slow down performance if it becomes involved with too many objects. It has been replaced by .live(), a more efficient method which allows greater interactivity with dynamically created objects. Although I am not recommending this, jQuery 1.8.3 was the last version to support .live(). It's best to upgrade your script. – Expectation

Thanks, spryno724, yes, it's true, jQuery 1.8.3 is the last one that works with MVC3 jquery.unobtrusive-ajax.min.js. However, it is not "mine", the MVC3 jquery.unobtrusive-ajax.min.js script I was talking about is the library that comes with MVC3 framework. Here comes the problem - jQuery team is making changes to the core jQuery lib, while Microsoft MVC3 jquery.unobtrusive-ajax.min.js remains dependent on an alder version (any version up until 1.8.3): asp.net/ajaxlibrary/cdn.ashx#ASPNET_MVC_Releases_on_the_CDN_14 – Hallerson

You can also just include the jQuery Migrate plugin and the old code should just work. Remember to remove it once old plugins are updated. github.com/jquery/jquery-migrate#readme – Stephen

Answer 2

Update: This issue has been fixed in the latest NuGet package. I've posted another answer to reflect this. https://mcmap.net/q/403161/-unobtrusive-ajax-stopped-working-after-update-jquery-to-1-9-0

---

In jquery.unobtrusive-ajax.js, find and replace these four lines:

1. $("a[data-ajax=true]").live("click", function (evt) {

   $(document).on("click", "a[data-ajax=true]", function (evt) {

2. $("form[data-ajax=true] input[type=image]").live("click", function (evt) {

   $(document).on("click", "form[data-ajax=true] input[type=image]", function (evt) {

3. $("form[data-ajax=true] :submit").live("click", function (evt) {

   $(document).on("click", "form[data-ajax=true] :submit", function (evt) {

4. $("form[data-ajax=true]").live("submit", function (evt) {

   $(document).on("submit", "form[data-ajax=true]", function (evt) {

You can also generate a new jquery.unobtrusive-ajax.min.js using WebGrease. From the Command Prompt, change to your solution folder and enter this command (assuming your project folder is called Web):

packages\WebGrease.1.3.0\tools\WG.exe -m -in:Web\Scripts\jquery.unobtrusive-ajax.js -out:Web\Scripts\jquery.unobtrusive-ajax.min.js

Riella

Lines 115, 124, 140 and 151; also you can use online minifiers, but great answer. – Sidman

Thanks for the more detailed information. First I only changed .live to .on, but this alone didn't work. – Cauchy

I'm getting "Unexpected token u " error i console after I did what you suggested, can you please help? – Telangiectasis

Try the other answer to update the file automatically: https://mcmap.net/q/403161/-unobtrusive-ajax-stopped-working-after-update-jquery-to-1-9-0 – Riella

Answer 3

Update the Microsoft jQuery Unobtrusive Ajax NuGet package to the latest version.

In Visual Studio, from the Tools menu, select Library Package Manager and then click Package Manager Console. At the prompt, type:

Update-Package Microsoft.jQuery.Unobtrusive.Ajax

This issue was fixed in Microsoft jQuery Unobtrusive Ajax 2.0.30116.0 (Monday, February 18, 2013), which replaced the calls to the .live() method (deprecated in jQuery 1.7 and removed from jQuery 1.9) with the recommended .on() method.

Riella

This is the best solution now that it's available. Also, make sure you clear your browser's cache when upgrading javascript packages. – Tenorrhaphy

Answer 4

The easiest way to fix problems with the breaking changes in jQuery(in my opinion) is to install the jQuery.Migrate package that enables you to use deprecated function calls that were removed in version 1.9.0 onwards. At least until the unobtrusive ajax plugin is updated by Microsoft.

Also, it appears that the nightly build of the unobtrusive ajax plugin have updated the api calls. I haven't tested it yet but you may find out how to acquire it in the asp.net codeplex page.

UPDATE: The Unobtrusive Ajax and Validation Nuget packages were updated so the jQuery.Migrate package isn't needed anymore.

Mercurio

Answer 5

Also need to do these fixes :

Update jQuery.Validation plugin (to fix this problem)

https://nuget.org/packages/jQuery.Validation/1.11.0    (first available on nuget 2/4/13)

Also make these changes to the jquery.unobtrusive-ajax.js file (see here for Connect issue)

Line 43: replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace")) !== false;

Line 73: replace = container.attr("data-valmsg-replace") && $.parseJSON(container.attr("data-valmsg-replace"));

Partite

Answer 6

Replace

.live(function)

With

.on(eventType, selector, function)

https://mcmap.net/q/99871/-jquery-1-9-live-is-not-a-function

Cabbagehead

Warning, this somehow broke my Ajax-functionality with unobtrusive-ajax. – Kreit

Answer 7

Here is an actual minified file that should work for you. Works for me anyways. I just manually edited it.

    /*
** Unobtrusive Ajax support library for jQuery
** Copyright (C) Microsoft Corporation. All rights reserved.
*/
(function(a){var b="unobtrusiveAjaxClick",g="unobtrusiveValidation";function c(d,b){var a=window,c=(d||"").split(".");while(a&&c.length)a=a[c.shift()];if(typeof a==="function")return a;b.push(d);return Function.constructor.apply(null,b)}function d(a){return a==="GET"||a==="POST"}function f(b,a){!d(a)&&b.setRequestHeader("X-HTTP-Method-Override",a)}function h(c,b,e){var d;if(e.indexOf("application/x-javascript")!==-1)return;d=(c.getAttribute("data-ajax-mode")||"").toUpperCase();a(c.getAttribute("data-ajax-update")).each(function(f,c){var e;switch(d){case"BEFORE":e=c.firstChild;a("<div />").html(b).contents().each(function(){c.insertBefore(this,e)});break;case"AFTER":a("<div />").html(b).contents().each(function(){c.appendChild(this)});break;default:a(c).html(b)}})}function e(b,e){var j,k,g,i;j=b.getAttribute("data-ajax-confirm");if(j&&!window.confirm(j))return;k=a(b.getAttribute("data-ajax-loading"));i=b.getAttribute("data-ajax-loading-duration")||0;a.extend(e,{type:b.getAttribute("data-ajax-method")||undefined,url:b.getAttribute("data-ajax-url")||undefined,beforeSend:function(d){var a;f(d,g);a=c(b.getAttribute("data-ajax-begin"),["xhr"]).apply(this,arguments);a!==false&&k.show(i);return a},complete:function(){k.hide(i);c(b.getAttribute("data-ajax-complete"),["xhr","status"]).apply(this,arguments)},success:function(a,e,d){h(b,a,d.getResponseHeader("Content-Type")||"text/html");c(b.getAttribute("data-ajax-success"),["data","status","xhr"]).apply(this,arguments)},error:c(b.getAttribute("data-ajax-failure"),["xhr","status","error"])});e.data.push({name:"X-Requested-With",value:"XMLHttpRequest"});g=e.type.toUpperCase();if(!d(g)){e.type="POST";e.data.push({name:"X-HTTP-Method-Override",value:g})}a.ajax(e)}function i(c){var b=a(c).data(g);return!b||!b.validate||b.validate()}a(document).on("click", "a[data-ajax=true]", function(a){a.preventDefault();e(this,{url:this.href,type:"GET",data:[]})});a(document).on("click", "form[data-ajax=true] input[type=image]", function(c){var g=c.target.name,d=a(c.target),f=d.parents("form")[0],e=d.offset();a(f).data(b,[{name:g+".x",value:Math.round(c.pageX-e.left)},{name:g+".y",value:Math.round(c.pageY-e.top)}]);setTimeout(function(){a(f).removeData(b)},0)});a(document).on("click","form[data-ajax=true] :submit", function(c){var e=c.target.name,d=a(c.target).parents("form")[0];a(d).data(b,e?[{name:e,value:c.target.value}]:[]);setTimeout(function(){a(d).removeData(b)},0)});a(document).on("submit","form[data-ajax=true]",function(d){var c=a(this).data(b)||[];d.preventDefault();if(!i(this))return;e(this,{url:this.action,type:this.method||"GET",data:c.concat(a(this).serializeArray())})})})(jQuery);

Alden

Answer 8

Just update your Scripts

1. Download latest Jquery, (I used jquery-1.11.0 though)

2. Download latest Microsoft.jQuery.Unobtrusive.Ajax from from Microsoft official

From here:

https://github.com/aspnet/jquery-ajax-unobtrusive

3. Do hard refresh or Clear your browser cache and check your page again.

Hope helps someone.

Orfield