Search code examples
javascriptjqueryxpages

Import of some library using jquery freezes the entire xpage

I have an XPage which only uses 2 js imports - one of them is JQuery and another one dependent on JQuery and it is used for smart companies search of Russian Federation. The problem I have encountered is that when I try to import the second library, the entire page becomes unresponsive (e.g. inability to click any buttons).

Here's what I mean:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.resources>
        <xp:script
            src="https://code.jquery.com/jquery-3.3.1.js"
            clientSide="true">
        </xp:script>

    <!-- the problematic library -->    
    <xp:script src="https://cdn.jsdelivr.net/npm/suggestions-jquery/dist/js/jquery.suggestions.js"
            clientSide="true">
        </xp:script>

        <xp:styleSheet
            href="https://cdn.jsdelivr.net/npm/suggestions-jquery/dist/css/suggestions.min.css">
        </xp:styleSheet>

    </xp:this.resources>
<xp:div>

</xp:div>

<xp:button id="Unresponsive button">
    Here's the unresponsive button
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[alert('we'll never be able to see this')]]></xp:this.script>
    </xp:eventHandler></xp:button>

</xp:view>

So when I import the second library, the page becomes unresponsive (neither CSJS nor SSJS executes). I have no idea why this happens. When I write the same code, but just as a plain HTML page, I don't face the problem. Is it just a XPage feature? Perphaps, there are some additional parameters for import which I can use to avoid this problem? Thanks in advance.

Solution

  • The jquery.suggestions.js library uses AMD loader which conflicts with Dojo in XPages. See this answer to a similar issue.