We Keep Coding

Trying to avoid multiple calls to jQuery in a Domino XPage

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

Angular JS - Adding a jquery plugin to jQlite

I need to do some dom traversal on a $element, but jQuery or jQlite don't do what I need out of the box so I need to use a jQuery plugin called closestChild.
https://github.com/lolmaus/jquery.closestchild/blob/master/jquery.closestchild.js
I have installed using bower and I'm trying to load it after angular.min.js in my script tags but still getting the following error.
Uncaught TypeError: Cannot read property 'fn' of undefined
So, I assume that jQlite that comes with Angular doesn't give you the $ to work with by default? Or am I just doing things in the wrong order?

No, angular.element (jqLite) doesn't export $ global variable. So you can't just use any jQuery plugin with Angular without jQuery. In some cases, you can workaround it if you manually create $ reference before including plugin like if it was jQuery. For example like this:
<script src="path-to-angular.js"></script>
<script>
window.$ = window.jQuery = angular.element;
window.$.fn = window.$.prototype;
</script>
<script src="path-to-jquery.plugin.js"></script>
However, in your case it will not work, because the plugin of interest uses $.fn.filter method, which jqLite doesn't implement. Here is the list of all available angular.element methods.
You can implement some of them by yourself and include before plugin..
However, I would recommend to actually use jQuery if you want to use jQuery plugins.

jQlite does not support jQuery plugins. In reality it is meant to be a light-weight selector tool -- not a heavy-weight tool that supports extending, like jQuery.
You have two options:
Use JavaScript to implement the functionality ( element.getElementBySelector('foo)[0] ).
Include jQuery in your project.
I would personally use option 1.

How do you intergrate jquery library modules into your javascript framework using require js

I cloned the jquery library and tried to integrate it with my own JavaScript library without much success.
I do not need all the jquery functionality ,hence the need to only load the relevant jquery modules with the functionality i want.I have been able to load the core module (core.js) and have successfully utilized some of the functionality, however the functionality provided is limited in that i am unable to do chaining or even do simple stuff such as html element selection.Interestingly id selectors work perfectly fine, but element creation is not working.
Example code of what is working and not working.
define([
"../jquery/src/core",
"../jquery/src/selector",
],
function(
jqcore,
jqselector
){
//this works fine
var div_element = jqcore("#mydiv");
//This does not work ,i want to understand why this is not working
var body_element = jqcore("body");
//I would like to understand why i am not able to do this or what i should do for the code below to work
jqcore("p").append("<b>Appended text</b>");
})
I am using sizzle selector which i belive is being loaded corrently but i am not sure.

Are you sure you included the sizzle selector? (you claim you load it but I don't see it implemented in the code?)
See documentation
https://github.com/jquery/jquery (chapter modules)
I believe this paragraph describes the problem you are having:
sizzle: The Sizzle selector engine. When this module is excluded, it is replaced by a rudimentary selector engine based on the browser's querySelectorAll method that does not support jQuery selector extensions or enhanced semantics. See the selector-native.js file for details.
That would explain the basic selector support.

Check jQuery version and load a newer version

I have various web pages that have varying versions of jQuery included on them ranging from 1.4.2 upwards (yes, I know, it's a mess). I want to use the jQuery validation plugin on these pages but it requires jQuery 1.6.4+.
I know I can check the version of jQuery loaded and then load in a newer version if necessary but I'm unsure on how to reference them individually so the pre-existing JavaScript/jQuery code that's on the site can still use $ (as I know this works quite happily and I don't want to break it) and then the new plugin can use something else?
Any help or suggestions on a better way to do this would be greatly appreciated. Thanks.

Bad idea to do what you are doing.
If you really insist on having different jquery versions, you can always write some sort of a script manager. Basically you specify in your page's "config" what jquery versions are required on this page and the manager will load the appropriate one.
Something like:
// each page content before everything else
Manager.reguire("plugin 1", "1.4.7");
Manager.require("plugin 2", "1.4.4");
// Main layout <head section>
Manager.LoadRequiredVersions();
And the manager would just request the files for you, but don't forget that you might have to do some clever no-conflict stuff with jQuery if you want more than one on a single page. https://stackoverflow.com/a/1566644/486780
If it's one version per page then a manager would be the easiest option.

original version of jquery loads (Version1)
$ and jQuery belong to version1
second version of jquery loads (Verion2)
now $ and jQuery belong to Version2, and _$ and _jQuery that belongs to Version1
assign the Version2 version to a var ($v2 = jQuery.noConflict(true);)
now $ and jQuery belong to Version1, _$ and _jQuery are probably null, and $v2 is Version2

Using ReqiureJS to have local instances of 3rd party libraries

My application's JavaScript uses jQuery and jQuery plugins and running in "hostile" environment I have no control over (this is PHP extension for eCommerce platform). Thus no way to determine whether my jQuery code will be executed before someone will attach his instance of jQuery/plugins (introduced by other extension) or after this or someone will load jQuery dynamically after page rendered.
Basically the problem is that other extension could use jQuery (with plugins) also and just connecting jQuery with tag will not work.
I have a strong feeling that RequireJS might help me to load needed version of jQuery as far as particular versions of jQuery plugins into the encapsulated scope without polluting global scope (so other extensions will still function properly). Then I'll wrap all my code to "require" statements and it will run using it's own set of jQuery and plugins. I tried this and it kind of works (have not tested this in production environment though) but in some weird way. Seems like this question is kind of relevant to problems I have. Also answer suggesting to use AMD-compatible version of jQuery. But what about plugins? I don't think all plugins I use have such versions.
So questions:
Could RequireJS be used to cover such use case (running jQuery+plugins in undefined environment)? If RequireJS could be used there then any example code or explanation of how to do this properly will be greatly appreciated.
If there is no way to cover this with RequireJS what do you think would be best approach to handle issue?

Yes, I believe RequireJS can help you out here. To my knowledge you'll have to do some legwork, though. Take a look at the source of the (as of 2012-08-19) latest jQuery: link. At the bottom you can see that window.jQuery is being set, defining jQuery and $. The define call for AMD loaders happens after that, so jQuery is in the global scope no matter what. What you want to do is guarantee that your own version of jQuery and plugins stay isolated from other jQuery instances and plugins, correct?
Place your custom jQuery and plugins into their own directory (let's call it "jqcustom") and use that directory when specifying dependencies in your scripts' define calls. You'll want to modify your version of jQuery by wrapping it in a define call and returning the jQuery object at the very bottom, taking out jQuery's window.jQuery and window.$ assignments as well as its default define call in the process (these are both at the bottom, remember). Then you'll need to wrap all of your plugins in define calls and specify your own version of jQuery as the dependency. Example:
define(['jqcustom/jquery'], function(jQuery) {
//inside this method 'jQuery' will override any predefined global window.jQuery
//in case any plugins use the $ variable, define that locally too
var $ = jQuery;
//... plugin code ...
});
If you use RequireJS' optimizer, it can do the wrapping of the plugins for you with its shim config options. jQuery plugins work by adding methods to jQuery's prototype object, so I believe as long as you pass the same jQuery (your custom jqcustom/jquery one) to every plugin with your define wrapping, the plugins' extensions will all be set on the same object and be accessible in subsequent define calls specifying your custom jQuery or custom plugins as dependencies. Good luck!