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:

enter image description here

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

Anyone experienced the same problem ??

Was it helpful?

Solution 3

.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.

OTHER TIPS

Update: This issue has been fixed in the latest NuGet package. I've posted another answer to reflect this. https://stackoverflow.com/a/15539422/714309


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

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.

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.

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"));

Replace

.live(function)

With

.on(eventType, selector, function)

https://stackoverflow.com/a/14354091/358906

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);

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top