CODEWITHSUNDEEP
xpages
Patrick Kwinten
Patrick Kwinten

Reputation: 2048

loading a javascript library and not getting an object returned

I am trying to load a javascript library in XPages.

Normally in HTML the reference looks as followed:

<html>
<head>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
</head>
<body>
</body>
</html>

which gives me a Hammer object in the DOM which I can work further with.

In XPages I have made the following setup:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true"
    dojoForm="false" dojoTheme="false" dojoParseOnLoad="false"
    createForm="false">
    <xp:this.resources>
        <xp:script src="https://hammerjs.github.io/dist/hammer.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
</xp:view>

alternatively:

<?xml version="1.0" encoding="UTF-8" ?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true" dojoForm="false" dojoTheme="false" dojoParseOnLoad="false" createForm="false">
    <xp:this.resources>
        <xp:headTag tagName="script">
            <xp:this.attributes>
                <xp:parameter name="script" value="text/javascript" />
                <xp:parameter name="src" value="https://hammerjs.github.io/dist/hammer.js" />
            </xp:this.attributes>
        </xp:headTag>
    </xp:this.resources>
</xp:view>

But the Hammer object is not present in the DOM!

What am I doing wrong?

Upvotes: 2

Views: 1116

Answers (3)

Adam R
Adam R

Reputation: 386

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;
}

Upvotes: 1

Per Henrik Lausten
Per Henrik Lausten

Reputation: 21709

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;
}

Upvotes: 5

Steve Zavocki
Steve Zavocki

Reputation: 1840

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

Upvotes: 0

Related Questions