更新jQuery到1.9.0后,不显眼的Ajax停止工作了。

38
我刚刚更新了jQuery和jQuery UI至: jquery-1.9.0.min.js和 jquery-ui-1.9.2.min.js
然后...所有我的不显眼的Ajax调用(Ajax.ActionLink,Ajax.BeginForm)都无法正常工作 - 它们会在新页面中打开结果而不是更新现有的div。
当我的页面加载时,我在Firebug中得到这个javascript错误:

enter image description here

当然,代码没有改变,只是使用 Nuget 更新了 jQuery 脚本。

有人遇到过相同的问题吗?


2
我曾经遇到过同样的问题。我建议将jQuery降级回1.8.3,直到有更新的jQuery无侵入式验证。 - Richard
8个回答

71

更新:此问题已在最新的NuGet包中得到修复。我已经发布了另一个答案来反映这一点。 https://dev59.com/AGYq5IYBdhLWcg3wjBQM#15539422


jquery.unobtrusive-ajax.js 中,找到并替换以下四行:

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

您还可以使用WebGrease生成新的jquery.unobtrusive-ajax.min.js。 从命令提示符中,切换到解决方案文件夹并输入以下命令(假设您的项目文件夹名称为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

2
第115、124、140和151行;您也可以使用在线缩小器,但是请提供出色的答案。 - Steve Owen
1
谢谢提供更详细的信息。一开始我只是将.live改成了.on,但这样还不够。 - Gorgsenegger
在我按照您的建议操作后,控制台出现了“意外令牌u”的错误提示,您能否帮忙解决一下? - Sunny Sharma
2
尝试使用另一个答案来自动更新文件:https://dev59.com/AGYq5IYBdhLWcg3wjBQM#15539422 - jason_ruz

44

Microsoft jQuery Unobtrusive Ajax NuGet包更新到最新版本。

在Visual Studio中,从工具菜单中选择库程序包管理器,然后单击程序包管理器控制台。 在提示符处键入:

Update-Package Microsoft.jQuery.Unobtrusive.Ajax

这个问题已经在Microsoft jQuery Unobtrusive Ajax 2.0.30116.0 (2013年2月18日星期一)中得到了修复,该版本用推荐的.on()方法替换了对.live()方法(在jQuery 1.7中被弃用并在jQuery 1.9中被删除)的调用。


3
现在这是最好的解决方案。同时,在升级 JavaScript 包时,请确保清除浏览器缓存。 - snort

29

3
实际上,.delegate()也已经被弃用了 :-) 现在你想要的是.on() - Pointy
我需要说的是,我不打算手动更改现有的JS库。那样做是错误的。问题在于一个库与另一个库的兼容性。我们有jQuery库和jQuery不显式Ajax库,它被MVC使用。在生产环境中,我无法也不会手动更改jQuery不显式Ajax库以匹配新版本的jQuery库,这非常危险且混乱。无论如何,那更多是个修辞问题。正是JS库依赖于另一个独立更改并破坏功能的javascript库,这让我头痛。 - monstro
1
@Sigourney_Weaver 我明白你的困境。.live() 方法被废弃并移除实际上是一件好事。它已经被废弃了相当长的时间,而且已经有足够的警告表明它将被删除。这是一种比较臃肿的方法,如果与太多对象相关联,可能会使性能下降。它已被 .live() 替代,这是一种更有效率的方法,允许更多动态创建对象的交互。尽管我不建议这样做,但 jQuery 1.8.3 是最后一个支持 .live() 的版本。最好升级你的脚本。 - Oliver Spryn
1
谢谢,spryno724,是的,jQuery 1.8.3是最后一个与MVC3 jquery.unobtrusive-ajax.min.js兼容的版本。然而,这不是“我的”,我所说的MVC3 jquery.unobtrusive-ajax.min.js脚本是随MVC3框架一起提供的库。问题在于,jQuery团队正在对核心jQuery lib进行更改,而Microsoft MVC3 jquery.unobtrusive-ajax.min.js仍然依赖于旧版本(任何1.8.3版本及之前的版本):http://www.asp.net/ajaxlibrary/cdn.ashx#ASPNET_MVC_Releases_on_the_CDN_14 - monstro
2
你也可以只包含jQuery Migrate插件,旧代码应该能正常工作。记得在旧插件更新后将其移除。https://github.com/jquery/jquery-migrate#readme - Dave Methvin
显示剩余4条评论

10
在我看来,解决jQuery断更引起的问题最简单的方法是安装jQuery.Migrate包,它允许您使用在版本1.9.0及以后被删除的过时函数调用。至少在微软更新不具侵入性的ajax插件之前可以这样做。
另外,似乎不具侵入性的ajax插件夜间构建已经更新了API调用。我还没有测试过,但您可以在asp.net codeplex页面上找到如何获取它的信息。
更新: 不具侵入性的Ajax和验证Nuget包已经更新,所以不再需要jQuery.Migrate包。

4

还需要进行以下修复:

更新jQuery.Validation插件(以解决此问题)

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

同时,还需对 jquery.unobtrusive-ajax.js 文件进行以下更改 (请参阅此处的 Connect 问题)

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

3

警告,这个东西破坏了我的Ajax功能和unobtrusive-ajax。 - cederlof

1
这是一份实际的压缩文件,应该对你有用。至少对我有效。我只是手动编辑了它。
    /*
** 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);

0

只需更新您的脚本

1. 下载最新的Jquery(我使用的是jquery-1.11.0)

2. 从Microsoft官方网站下载最新的Microsoft.jQuery.Unobtrusive.Ajax

下载链接如下:

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

3. 进行硬刷新或清除浏览器缓存,然后再次检查您的页面。

希望能对某些人有所帮助。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接