Question

我正在使用Sitecore 8 Update 2制作一个人们可以留下一些个人信息的页面。如果用户已登录，则为其填写信息。（标准mvc 5表格）

我添加了一个WFFM（8.0 rev 141217）登录表单（如果成功重新加载页面并填写所有字段）但是当包含此代码时它会混淆Jquery。

        @Html.Sitecore().Placeholder("form")

我仍然可以看到jquery文件已在浏览器中加载，但“Jquery”变量现在未定义。（我在该页面上运行了一堆Jquery）

我该怎么做才能防止这种情况发生？或者我怎样才能找出导致这种情况的原因？

编辑：

我发现代码一切都变坏了。完成此函数后，Jquery变量未定义。但据我所知，此代码作为WFFM的一部分添加。（与html元素内联）

<script type="text/javascript">
    if (typeof ($scw) === "undefined") {
        window.$scw = jQuery.noConflict(true);
    }
    $scw(document).ready(function () {            
        $scw("#LVn73Spq0EGYvPQZ7-bA5Q").eventTracking({ pageId: "{55D3F49D-6EDA-43FB-81F1-191D34F896D4}", rules: "{&quot;*&quot;:&quot;{844BBD40-91F6-42CE-8823-5EA4D089ECA2}&quot;,&quot;regex&quot;:&quot;{F3D7B20C-675C-4707-84CC-5E5B4481B0EE}&quot;,&quot;length&quot;:&quot;{F3D7B20C-675C-4707-84CC-5E5B4481B0EE}&quot;,&quot;required&quot;:&quot;{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}&quot;}" });
    });
</script>

Answer 1

You need to include the WFFM script bundles in your forms. You can do this by registering the scripts in /Views/Form/Index.cshtml

@Scripts.Render("~/bundles/wffm/jquery")
@Scripts.Render("~/bundles/wffm/scripts")
@Styles.Render("~/content/wffm/jquery")
@Styles.Render("~/content/wffm/themes")

You only need to include the first two, the others adds default styling using jQuery UI themes, which you can then override (or not include them and style them yourself).

The reason for the js error is jQuery.noConflict(true) resets the jQuery name from scope. The WFFM noConflict call removes the last loaded jQuery library, which in this case is your manually loaded script earlier in the page and since it is the only jQuery library it has nothing to fall back to.

If necessary, you can free up the jQuery name as well by passing true as an argument to the method. This is rarely necessary, and if you must do this (for example, if you need to use multiple versions of the jQuery library on the same page)

See jQuery.noConflict() and this blog post for more details about loading two versions of jQuery

If you are sure the version if jQuery you loaded is compatible with the WFFM loaded version then you could simply set window.$scw = jQuery; but you will still need to load the scripts bundle since it includes form specific functionality.

Answer 2

我在网站上发生了完全相同的错误。发生错误的原因是我在<body>元素的底部包含了所有wffm jquery引用。将wffm jquery引用移动到<head>元素并重新加载页面后，我的控制台中没有错误。

Answer 3

关于捆绑时加载JavaScript文件的顺序：

最好您的项目使用正确关闭的js文件，（jQuery或$的范围使用）。如果是这种情况，您可以简单地将WFFM脚本作为最后一个库加载，即使在您自己的自定义应用程序代码之后也是如此。这样，这些脚本将省略全局jQuery变量，而闭包在本地保持对jQuery的引用。因此，这是一个很好的例子，为什么鼓励使用IIFE。

(function($){
    // $ = reference to jQuery remains intact
}(window.jQuery))

我现在可以在启用了异步属性的情况下从头部加载我的捆绑包（删除render-blocking JavaScript以提高页面加载速度）。

<head>
    ...
    @Scripts.RenderFormat("<script src='{0}' async='async'></script>", Sitecore.Context.PageMode.IsPageEditor
    ? "/scripts/sdw.editor.bundle.js"
    : "/scripts/sdw.web.bundle.js");
    ...
</head>

^{中的捆绑示例（粗体 WFFM的{{1}}要求}：

jQuery （体验编辑器中的bower更新版本通常可以正常工作）
jQuery-UI （WFFM依赖关系）
自举
jQuery验证 （WFFM依赖关系）
jQuery不显眼的验证 （WFFM依赖关系）
我的自定义JS （仍然适用于编辑器？）
WFFM脚本 （网站核心模块＆gt;网络＆gt;营销商的网络表单＆gt;脚本＆gt; mvc＆gt;字段＆gt; * .js）

另一方面，在结束Experience Editor之前加载的内联脚本或外部js文件中的jQuery相关代码在加载WFFM脚本后不再知道</body> 。在加载WFFM脚本之前，将它们拆分或定义jQuery。

混合内联脚本时捆绑的示例：

$scw

<强>结论：

避免从head标记同步加载，因为这会阻止渲染并导致页面加载速度变慢。
避免使用内联<head> ... @Scripts.Render("~bundles/libraries") // jQuery, jQuery-UI, Bootstrap, jQuery validation, ... <script>window.$scw = jQuery.noConflict(false);</script> @Scripts.Render("~bundles/wffmJs") </head> <body> ... <script type="text/javascript"> if (typeof ($scw) === "undefined") { window.$scw = jQuery.noConflict(true); } $scw(document).ready(function () { $scw("#@Model.ID.ToShortGuid()").eventTracking({ pageId: "@Model.PageId", rules: "@TrackingValidationErrorsProvider.Current.GetValidationRulesMap()" }); }); </script> ... @Scripts.Render("~bundles/myCustomJs") </body>标记，因为它们会强制您同步从head标记加载库。
如果需要，定义script以绕过$scw = jQuery。
最好是一个与头标签异步的捆绑。
使用闭包来保持引用库。

添加WFFM-form - Jquery问题

3 个答案: