I'm working to migrate a web application from Dojo 1.3.1 to Dojo 1.9.3. The application has lot of custom widgets. One of those is HelpTip
which is extended from dijit/Tooltip
.
Now, when I click on the button which displays the HelpTip, I get an exception on the line 2 shown below and it says TypeError: this._showTimer.remove is not a function
.
if(this._showTimer){
this._showTimer.remove();
delete this._showTimer;
}
I've copied the code above from the open
function of dijit/Tooltip (Dojo 1.9.1). But there is difference in dijit.Tooltip (Dojo 1.3.1) which is shown below:
if(this._showTimer){
clearTimeout(this._showTimer);
delete this._showTimer;
}
When I debug the application, it shows me some numbered value in _showTimer
variable. So, you can see that in 1.3.1 version of application, clearTimeout gets a number and it works fine. But in 1.9.3 version, it is trying to call the remove
method of a numbered value and I don't really know that what is this for.
EDIT:
Here is the code of my HelpTip.js
file
define([
"dojo/_base/array",
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/dom",
"dojo/has",
"dojo/topic",
"dijit/Tooltip",
"dojo/on"
], function (array, declare, lang, dom, has, topic, Tooltip, on) {
var HelpTip = declare("tt.widget.HelpTip",Tooltip,{
// summary
// Pops up a tooltip (a help message) when you hover over a node.
showDelay: 0,
_noHelpAvailable: "Unable to load help for this item. Please contact support.",
api: null,
connectHandlers: function(/*Array*/ ids) {
array.forEach(ids, function(id) {
var node = dom.byId(id);
if (node && node.tagName.toLowerCase() != "html" && node.tagName.toLowerCase() != "head" && node.tagName.toLowerCase() != "body") {
this.connectId.push(node);
// For A11y we may need to work with onFocus as well
this.connect(node, "onclick", "_onClick");
if(has("ie")){
// BiDi workaround
node.style.zoom = 1;
}
}
}, this);
},
disconnectHandlers: function(/*Array*/ ids) {
if (ids) {
for (var i = this._connects.length - 1; i >= 0; i--) {
if (this._connects[i] && this._connects[i][0] && this._connects[i][0][0]) {
if (array.indexOf(ids, this._connects[i][0][0].id) != -1) {
this._connects[i].remove();
}
}
}
}
},
_onClick: function(/*Event*/ e) {
e.preventDefault(); // don't navigate!
this._onHover(/*Event*/ e);
},
_onHover: function(/*Event*/ e){
if (e.target.id == null || e.target.id == "") {
this.label = this._noHelpAvailable;
} else {
this.label = "Retreiving help for this item...";
this.aroundNode = e.target;
var ids = e.target.id.split("_");
this.api.helpGetText(lang.hitch(this, this.helpGetText), ids[0], ids[1], ids[2]);
}
if(!this._showTimer){
var target = e.target;
this._showTimer = setTimeout(lang.hitch(this, function(){this.open(target)}), this.showDelay);
}
},
_onUnHover: function(/*Event*/ e){
// keep a tooltip open if the associated element has focus
if(this._focus){ return; }
if(this._showTimer){
clearTimeout(this._showTimer);
delete this._showTimer;
}
this.closeNodeConnect.remove();
this.close();
},
helpGetText: function(/*String*/ helpText, /*Object*/ error) {
if (error) {
topic.publish("/errorHandling/trapError", error);
return;
}
this.closeNode = document.createElement("div");
this.closeNode.className = "fakeLink";
this.closeNode.innerHTML = "Close";
this.closeNodeConnect = this.connect(this.closeNode, "click", "_onUnHover");
if (helpText != null && helpText != "") {
if (dijit._masterTT.containerNode != null) {
dijit._masterTT.containerNode.innerHTML = helpText + "<br><br>";
dijit._masterTT.containerNode.appendChild(this.closeNode);
}
} else {
if (dijit._masterTT.containerNode != null) {
dijit._masterTT.containerNode.innerHTML = this._noHelpAvailable + "<br><br>";
dijit._masterTT.containerNode.appendChild(this.closeNode);
}
}
// Firefox bug. when innerHTML changes to be shorter than previous
// one, the node size will not be updated until it moves.
dijit._masterTT.domNode.style.top = (dijit._masterTT.domNode.offsetTop + 1) + "px";
// position the element and change CSS according to position
var align = dijit._masterTT.isLeftToRight() ? {'BR': 'BL', 'BL': 'BR'} : {'BL': 'BR', 'BR': 'BL'};
var pos = dijit.placeOnScreenAroundElement(dijit._masterTT.domNode, this.aroundNode, align);
this.aroundNode = null;
dijit._masterTT.domNode.className="dijitTooltip dijitTooltip" + (pos.corner=='BL' ? "Right" : "Left");//FIXME: might overwrite class
}
}
);
return HelpTip;
});
Thanks
In Dojo 1.9 this._showTimer is a function but your code replaced it with a setTimeout handle. The function that if should return is defined in _WidgetBase (this.defer). In the source code of the Tooltip is see this code:
_onHover: function(/*DomNode*/ target){
// summary:
// Despite the name of this method, it actually handles both hover and focus
// events on the target node, setting a timer to show the tooltip.
// tags:
// private
if(!this._showTimer){
this._showTimer = this.defer(function(){ this.open(target); }, this.showDelay);
}
},
This means that this._showTimer is connected to a function defined in _widgetBase. That function is some kind of wrapper function around setTimeout to prevent events from happening if widgets are already destroyed. I would recommend using this.inherited(arguments) and use the buildin timing functions of the widget.