Search code examples
jquerytwitter-bootstrap-3xpageslotus-dominotypeahead.js

Using Typeahead.js with Bootstrap 3 in xpages not working


I am trying to use the typeahead.js functionality with bootstrap 3 in an Xpage.

I have included the Bootstrap 3 files, jQuery2.4.3 and typeahead.js in the database( webContent) and included them as resources along with the input field/Editbox and assigned it with the class of 'typeahead'.

I am using an example from a response by Mark Leusink to another separate issue Xpages: TypeAhead with Bootstrap.

See my Xpage code below:

    <xp:view xmlns:xp="http://www.ibm.com/xsp/core" >
    <xp:this.resources>
        <xp:styleSheet href="/bootstrap/css/bootstrap.min.css"></xp:styleSheet>
        <xp:styleSheet
            href="/bootstrap/css/typeahead.js-bootstrap.css">
        </xp:styleSheet>
        <xp:script src="/jquery/jquery-2.1.4.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/bootstrap/js/bootstrap.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/jquery/x$.js"
            clientSide="true">
        </xp:script>
        <xp:script src="/typeahead/typeahead.bundle.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
    <xp:this.beforePageLoad>
        <![CDATA[#{javascript:viewScope.put("typeaheadOptions", toJson(["Alabama", "Alaska"]));}]]>
    </xp:this.beforePageLoad>

    <xp:inputText id="inputText1" autocomplete="off"
        styleClass="typeahead tt-query">

    </xp:inputText>

    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[var value = #{viewScope.typeaheadOptions};
x$('inputText1').typeahead({source: value });

    ]]></xp:this.value>
    </xp:scriptBlock>
</xp:view>

When I type in the input field nothing happens. What am I doing wrong?

Thanks


Solution

  • I have these Items working now. I beleive it was down to the way I modified the JS files to disable the AMD loader. When I repeated the processes of modifying the originals and reloaded and it worked. Also I now agree with david and the warning message 'Synchronous XMLHttpRequest on the main thread can be ignored