0

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

Community
  • 1
  • 1
brandonw
  • 78
  • 5
  • Are there any error messages from the client side javascript console? – David Leedy May 17 '15 at 10:47
  • My guess is that typeahead.js uses AMD. See this answer on how to disable AMD: http://stackoverflow.com/a/26339718/785061 – Per Henrik Lausten May 17 '15 at 11:11
  • Thanks for the response @PerHenrikLausten I have now disabled the AMD in jquery.js and in the typeahead.js however I still don't get any result. – brandonw May 18 '15 at 01:27
  • Thanks @DavidLeedy. I am not getting any error msgs - only the "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/." for the dojo.js. Is this my issue?? – brandonw May 18 '15 at 01:29
  • I don't believe that's your issue. I see those messages on my stuff. – David Leedy May 18 '15 at 18:02
  • I have the same problem. No usual tricks seem to help and there is no error message in the client console to help with troubleshooting. Will keep investigating. – Sasa Brkic Aug 24 '15 at 10:03

1 Answers1

0

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

brandonw
  • 78
  • 5