Using BootStrap Sliders with XPages fails to show tooltip

Question

I was trying to use the Bootstrap Sliders project in my XPages app. It seems to work fine but the tooltip never shows when I load it on an XPage. It works fine in an html file that is in the same .nsf. Below is the html code which is at https://www.netexperts.com/sliders.nsf/testHtml.html and it works...

<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/Sliders.nsf/slider/bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="/Sliders.nsf/slider/bootstrap-slider.min.css">

</head>

<body>
<BR><BR><BR>

<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-tooltip="always"//>
<script type='text/javascript'>
        $(document).ready(function() {

            $('#ex8').slider({
                formatter: function(value) {
                //console.log(value);
                    return 'Current value: ' + value;
                }

            });});
    </script>
</body>

</html>

Below is the XPage code and it shows the slider but never shows the tooltip... The only thing I can think of is that Dojo is getting in the way but can't figure out how to debug this? This is at https://www.netexperts.com/sliders.nsf/testSlider2.xsp. Note that there is no tooltip...

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

        <xp:script
            src="slider/bootstrap-slider.js"
            clientSide="true">
        </xp:script>

        <xp:styleSheet href="slider/bootstrap-slider.min.css"></xp:styleSheet>
        <xp:styleSheet href="/sliderCustom.css"></xp:styleSheet>
    </xp:this.resources>
    <div class="container">

      <xp:br></xp:br>
      <xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br>

        <div class='slider-example'>
            <h3>Example 1:</h3>
            <p>Basic example with custom formatter.</p>

    <input
        id="ex8"

        data-slider-id='ex1Slider'
        type="text"
        data-slider-min="0"
        data-slider-max="20"
        data-slider-step="1"
        data-slider-value="14"
        data-slider-tooltip="always"
          />
          </div>
          </div>

    <script type='text/javascript'>
        $(document).ready(function() {

            $('#ex8').slider({
                formatter: function(value) {
                //console.log(value);
                    return 'Current value: ' + value;
                }

            });});
    </script>
</xp:view>

Anyone have a clue? Using these without the tooltip is not very user friendly...

thanks,

Howard

Cameron Gregor Cameron Gregor · Accepted Answer · 2016-09-23T00:09:55

It is most likely something to do with the order that the Javascript files are loading in combined with this "AMD" loading clash / problem. I don't yet understand the inner workings of the problem but I am aware of some workarounds.

Here is a blog post from Johnny Oldenburger which describes the problem in relation to bootstrap plugins: https://xpagesandmore.blogspot.com.au/2016/04/bootstrap-plugins-in-xpages-part-v.html

Here is an xsnippet by Ferry Kranenburg that explains how to load a javascript file unaffected by the AMD loader. https://openntf.org/XSnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together

Here is an example from Sven Hasselbach of making sure your script is loaded before dojo http://hasselba.ch/blog/?p=1181

Here is an advanced solution by Sven in which you can control the 'whereabouts' all of your javascript files e.g. whether they should be loading before dojo, disable AMD, load on page load etc. http://hasselba.ch/blog/?p=2070

My best guess is that the xsnippet will be easiest for you to implement but I'm not 100% sure if it works (because with javascript I always feel like I am guessing!) but please let us know if it does/doesn't work.

Replace your this.resources script with this:

<xp:this.resources>

  <!-- temporary redefine define.amd object  (Dojo AMD loader) -->
  <xp:script clientSide="true" type="text/javascript">
    <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
  </xp:script>

  <!-- load jquery AMD enabled widgets -->
  <xp:script src="slider/bootstrap-slider.js" clientSide="true"></xp:script>

  <!-- restore define.amd object (Dojo AMD loader) -->
  <xp:script clientSide="true">
    <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
  </xp:script>

</xp:this.resources>

Using BootStrap Sliders with XPages fails to show tooltip

2 Answers