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