尝试避免在Domino XPage中多次调用jQuery [英] Trying to avoid multiple calls to jQuery in a Domino XPage

问题描述

我正在尝试在简单的Domino XPage上为jQuery使用" DataTables "表插件. /p>

我已经从CDN的文件库中加载了两个必需的库...

JQuery:ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

数据表:cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

我也尝试过从本地资源加载它们(无济于事).

然后我在XPage上准备一个基本表，并包括必要的Javascript来初始化该表...

$(document).ready(function() {
    $('#tableID').DataTable();
} );

测试XPage时，我会不断观察

test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function

我已经搜索了多个论坛，并且普遍的共识是……

a)我以错误的顺序加载了库(不！)

b)我已多次加载jQuery(如何?)

我还有许多其他使用Bootstrap和jQuery的解决方案，并且从未遇到过此问题.因此，尽管我可能会将XPage剥离掉.通过将以下行添加到"xp.properties"文件中，我摆脱了页面上的所有Dojo元素...

xsp.client.script.libraries=none

这似乎确实有效！我不再观察到错误.但是，我的页面不再看起来应该是这样(出于明显的原因！).我不得不将'xp.properties'文件恢复到其原始状态，但无法找到避免错误的方法.

有人在XPage上成功使用过"DataTables" jQuery插件吗?任何反馈或建议，将不胜感激！

解决方案

是的，我一直在XPages的DataTables上进行大量工作，因此它肯定可以工作！我知道你的痛苦... 您的jquery脚本相对于彼此的顺序可能还不错，但是与dojo和它的AMD loader冲突，所以您有3个选择.

选项1.在任何xpages脚本之前加载您的jquery脚本

选项2.在您的jquery脚本之前删除"amd loader"，然后在之后删除它

选项3.修改数据表的JavaScript，使其忽略amd问题

选项1:首先加载jQuery脚本

如果您正在使用资源聚合，则可以使用Sven Hasselbach的博客中的技巧，在此技巧中，您将使用通用的"headTag"资源标签，并且该资源标签将首先加载. http://hasselba.ch/blog/?p=1181

如果您想要一个无论资源聚合设置如何都能运行的解决方案，我在博客上有一个示例，您可以在其中创建一个viewRootRenderer，然后该视图允许您指定要在其他所有内容之前加载脚本 http://camerongregor .com/2016/09/19/control-the-order-of-script-resources-eg-jquery-with-a-custom-viewrootrenderer/

选项2.在加载脚本之前删除AMD加载器

有一个xsnippet，它解释了如何删除然后恢复amd加载器，以便加载jquery插件 https://openntf.org/xsnippets.nsf/snippet.xsp?id = hack-to-use-jquery-amd-widgets-and-dojo-together

Sven已经做出了与我上面的类似的解决方案(viewRootRenderer)，您可以在其中指定哪些脚本需要禁用amd loader，并将为您执行此操作，可在此处找到 http://hasselba.ch/blog/?p=2070

选项3:修改jquery插件(数据表)的javascript

马克·罗登(Mark Roden)在他的博客上展示了这一点.我不是很喜欢这样做，但是嘿！ https://xomino.com/category/jquery-in-xpages/

让我知道其中任何一项是否有效！我希望我是对的，使用我不知道的javascript ...

I am attempting to use the 'DataTables' table plug-in for jQuery on a simple Domino XPage.

I have loaded the two required libraries from CDN's...

JQuery: ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

DataTables: cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

I have also tried loading them from local resources (doesn't help).

I then prepare a basic table on my XPage, and include the necessary Javascript to initialise the table...

$(document).ready(function() {
    $('#tableID').DataTable();
} );

When I test the XPage, I continually observe

test.xsp:15 Uncaught TypeError: $(...).DataTable is not a function

I've searched through several forums, and the general consensus is that...

a) I have loaded the libraries in the wrong order (nope!)

b) I have loaded jQuery more than once (how?)

I have many other solutions using Bootstrap and jQuery, and have never run into this issue before. So, I though I might strip the XPage back to bare bones. I got rid of all Dojo elements on the page by adding the following line to the 'xp.properties' file...

xsp.client.script.libraries=none

That actually seemed to work! I no longer observed the error. However, my page no longer looked like it should (for obvious reasons!). I've had to restore the 'xp.properties' file back to its original state, but cannot find out how to avoid the error.

Has anyone successfully used the 'DataTables' jQuery plug-in on an XPage? Any feedback or suggestions would be most appreciated!

解决方案

Yes I have been doing a load of work on DataTables in XPages so it definitely works! I know your pain though.... The order of your jquery scripts in relation to each other may be okay, however there is a clash with dojo and it's AMD loader, so you have 3 options.

Option 1. Load your jquery scripts before any of the xpages scripts

Option 2. remove the 'amd loader' just before your jquery scripts and then restore it just after

Option 3. modify the javascript of the datatables so it ignores the amd problem

Option 1 : Loading your jQuery scripts first

If you are using resource aggregation, you can use this tip from Sven Hasselbach's blog, in which you use the generic 'headTag' resource tag and it will load first. http://hasselba.ch/blog/?p=1181

If you want a solution that will work regardless of resource aggregation setting, I have an example on my blog in which you can create a viewRootRenderer which will then allow you to specify that you want a script loaded BEFORE everything else http://camerongregor.com/2016/09/19/controlling-the-order-of-script-resources-e-g-jquery-with-a-custom-viewrootrenderer/

Option 2. Removing the AMD loader before loading scripts

There is an xsnippet which explains how to remove and then restore the amd loader so that a jquery plugin will load https://openntf.org/xsnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together

Sven had already made a similar solution to mine above (viewRootRenderer) in which you can specify which scripts will need the amd loader disabled and it will do this for you, it is available here http://hasselba.ch/blog/?p=2070

Option 3 : modify javascript of the jquery plugin (datatables)

Mark Roden demonstrated this on his blog. I don't really like doing it but hey it works! https://xomino.com/category/jquery-in-xpages/

Let me know if any of this works! I hope I'm right, with javascript I never know...

这篇关于尝试避免在Domino XPage中多次调用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！