loading a javascript library and not getting an object returned

Question

I am trying to load a javascript library in XPages.

Normally in HTML the reference looks as followed:

Answer 1

hammer.js uses AMD. Here's a snippet from the hammer.js source code where AMD is used:

if (typeof define == TYPE_FUNCTION && define.amd) {
    define(function() {
        return Hammer;
    });
} else if (typeof module != 'undefined' && module.exports) {
    module.exports = Hammer;
} else {
    window[exportName] = Hammer;
}

Unfortunately AMD loading conflicts with Dojo in XPages. See this answer on how to remove AMD loading.

In your case you need to download hammer.js, change the AMD loading part, add it to your nsf and then load the script from your nsf instead.

You remove the AMD loading part by changing the code in hammer.js to for instance this:

//if (typeof define == TYPE_FUNCTION && define.amd) {
//    define(function() {
//        return Hammer;
//    });
//} else if (typeof module != 'undefined' && module.exports) {
if (typeof module != 'undefined' && module.exports) {
    module.exports = Hammer;
} else {
    window[exportName] = Hammer;
}

Answer 2

Another way to handle this is to use the AMD loader which is a part of Dojo on newer versions of Domino.

This code implements the basic example from the hammer.js documentation (I'm only using jQuery for the ready function):

require({
    async: true, 
    aliases: [['jquery', '//code.jquery.com/jquery-1.11.3.min.js'],
             ['Hammer', '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js']]
}, ['jquery', 'Hammer'], function(jq, Hammer){
    $(function() {
        var myElement = document.getElementById('myElement');

        // create a simple instance
        // by default, it only adds horizontal recognizers
        var mc = new Hammer(myElement);

        // listen to events...
        mc.on("panleft panright tap press", function(ev) {
            myElement.textContent = ev.type +" gesture detected.";
        });
    });
});

Then just add the code to your xpage in a script tag:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:styleSheet href="./css/basicImpl.css"></xp:styleSheet>
        <xp:script src="./js/basicImpl.js" clientSide="true"></xp:script>
    </xp:this.resources>
    <div id="myElement"></div>
</xp:view>

I'm also using the stylesheet from the example:

#myElement {
    background: silver;
    height: 300px;
    text-align: center;
    font: 30px/300px Helvetica, Arial, sans-serif;
}

Answer 3

A few things in no particular order:

• You can test that the script is loaded by using Chrome Dev Tools, and go to console. You can then put script in to call the hammer code. If the script isn't loaded then you will get an error. Your script might already be loaded.

• Verify with the Hammer js site that you are loading the script properly

• Try putting your code in the onClientLoad event which just loads client code.

• Put the Hammer.js code into your NSF, to make sure you do not have connection issues to github. Use Package Explorer and put the files in the WebContent/js folder. Put any CSS in the WebContent/CSS folder