I'm upgrading an application from tapestry 5.3.8 to 5.6.2. We use
tapestry-jquery and an old bootstrap. Currently there is a mixin to copy
some text to the clipboard and at the end of the script we inform the user
that the text has been copied with a tooltip.
define([], function() {
var copyToClipboard = function(spec){
$('#'+spec.id).click(function(){
var temp$ = $("<input>");
$("body").append(temp$);
temp$.val(spec.prefix + $(spec.selector).text() +
spec.suffix).select();
document.execCommand("copy");
temp$.remove();
if (spec.tooltip == "yes") {
var pop = $(this).tooltip({ trigger:"manual", title:"Copied",
placement:"right" });
pop.on('shown.bs.tooltip',function() { setTimeout(function() {
pop.tooltip("hide"); }, 800); });
pop.tooltip("show");
}
})
};
return {
copyToClipboard : copyToClipboard
};
});
but I'm getting the error "Uncaught Error: no such method 'show' for
tooltip widget instance" because the tooltip that is being used is taken
from jquery-ui and not from bootstrap as it was originally.
I have read that this problem is because the loading order should be
jquery, jquery-ui and bootstrap libraries but the logs in chrome only show
the bootstrap.js:
console.js:104 Loading 11 libraries
console.js:104 Loading library /ims/assets/ctx/z23b9558b/js/bootstrap.js
console.js:104 Loading library
/ims/assets/commons/zc46018e5/components/Menu.js
console.js:104 Loading library
/ims/assets/commons/z5da75a57/mixins/ClickOnce.js
....
and many other lines about Evaluating and Invoking
And the order in the network tab from the developers tools show
1. jquery.js
2. bootstrap.js (from tapestry core)
3. bootstrap.js (the version from my app)
4. jquery-ui.js
the source html generated has only references to jquery and bootstrap
.....
<script src="/ims/assets/meta/z48d5fae5/tapestry5/require.js"
type="text/javascript"></script>
<script src="/ims/assets/meta/z8f1eb79c/tapestry5/underscore-1.8.3.js"
type="text/javascript"></script>
<script src="/ims/assets/meta/zd746764f/tapestry5/t53-compatibility.js"
type="text/javascript"></script>
<script src="/ims/assets/meta/z8c546d97/tapestry5/jquery.js"
type="text/javascript"></script>
<script type="text/javascript">require(["t5/core/pageinit"], function(pi) {
pi([
"/ims/assets/ctx/z23b9558b/js/bootstrap.js",
"/ims/assets/commons/zc46018e5/components/Menu.js",
"/ims/assets/ctx/ze4024904/js/mermaid.min.js",
.....
but after loading the page scripts look like this
<script type="text/javascript" charset="utf-8" async=""
data-requirecontext="_" data-requiremodule="t5/core/pageinit"
src="/ims/modules.gz/t5/core/pageinit.js"></script>
...other tapestry scripts....
<script type="text/javascript" charset="utf-8" async=""
data-requirecontext="_" data-requiremodule="t5/core/bootstrap"
src="/ims/modules.gz/t5/core/bootstrap.js"></script>
<script type="text/javascript" charset="utf-8" async=""
data-requirecontext="_"
data-requiremodule="/ims/assets/ctx/z23b9558b/js/bootstrap.js"
src="/ims/assets/ctx/z23b9558b/js/bootstrap.js"></script>
....other application scripts.....
<script type="text/javascript" charset="utf-8" async=""
data-requirecontext="_"
data-requiremodule="beluca/commons/web/mixins/CopyToClipboard"
src="/ims/modules.gz/beluca/commons/web/mixins/CopyToClipboard.js"></script>
.....finally jquery-ui
<script type="text/javascript" charset="utf-8" async=""
data-requirecontext="_" data-requiremodule="tjq/vendor/ui/jquery-ui"
src="/ims/modules.gz/tjq/vendor/ui/jquery-ui.js"></script>
....and many other scripts
Now, the application has a BootstrapStack (JavascriptStack) that loads the
bootstrap.js and other assets, I even force the loading of the jquery-ui
putting it in the same stack.
Also I created a different Stack for jquery-ui with no luck.
Also, I tried to modify the js module of the mixin to add the modules in
order
define(["jquery", "tjq/vendor/ui/jquery-ui","bootstrap"], function($,
jquery-ui, bootstrap) {
Also I tried defining the BOOTSTRAP_ROOT to see if this changed the order.
What else can I test to achieve the order I need?
Is this happening because of the bootstrap version? because it is a library
and not a module?
is it possible to "encapsulate" my current bootstrap in a javascript module
in order to be loaded as a module?
The final solution would be to change the way we make the feedback to
the user, replacing the tooltip with something else.
Thanks in advance
