动态更改ToolTipDialog内容

Question

我的应用程序有一个指示器列表，每个指示器都有其帮助按钮。点击每个按钮，分别为每个按钮提供一个带有定义的ToolTipDialog。我编写代码的方式（如下所示），当用户单击第一个单击按钮后单击列表中的另一个帮助按钮时，内容不会刷新。我一直无法弄清楚如何动态改变“内容”。任何帮助将不胜感激：

HTML：

<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true"> 
<table id="popIndTable"> 
<tr id="someID"> 
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td> 
<td id="indCBR">Crude Birth Rate</td> 
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td> 
</tr> 
<tr> 
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td> 
<td id="indTest1">Test 1</td> 
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td> 
</tr> 
<tr> 
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td> 
<td id="indTest2">Test 2</td> 
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png" width="16px" onClick="showToolTipDialog(this,this.id);" /></td> 
</tr> 
</table> 
</div> 

的JavaScript：

function showToolTipDialog(node,infoId){ 
var infoText; 
var infoElem = dojo.byId(infoId).parentNode.id; 
if (infoElem == "infoCBR"){ 
infoText = "This is the text container for CBR"; 
} 
else if (infoElem == "infoTest1"){ 
infoText = "This is the text container for Test1"; 
} 
if (!tooltipDialog) { 
tooltipDialog = new dijit.TooltipDialog({ 
content: infoText, 
style: "width:200px;height:auto;", 
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog 
refocus: !dojo.isIE 
}); 
dijit.popup.open({ popup: tooltipDialog, around: node}); 
tooltipDialog.opened_ = true; 
} 
else { 
if (tooltipDialog.opened_) { 
dijit.popup.close(tooltipDialog); 
tooltipDialog.opened_ = false; 
} 
else { 
dijit.popup.open({popup: tooltipDialog, around: node}); 
tooltipDialog.opened_ = true; 
} 
} 
} 

Answer 1

它看起来像你从来没有重置tooltipDialog的内容。您创建一次，但一旦创建它（new dijit.TooltipDialog({...})）它仍然是静态的。

我不知道Dojo API。但是，你能直接设置内容值吗？也许之后你的第一else：

tooltipDialog.content = infoText; 

这只是一个猜测，但如果Dojo的API是很简单的，可能做的伎俩。

如果不是，您可能需要删除您的if (!tooltipDialog) {支票。

Answer 2

我相信以编程方式更改dojo小部件值的首选方法是使用.set（）方法。即：

this.myTooltipDialog.set("content", newContent); 

不是：

this.myTooltip.content = newContent; 

Answer 3

如果你的内容是不是太复杂，我建议你创建一个新的TooltipDialog每一个电话，当模糊清除它，就像

var dlgDiv = dojo.create("div"); 
var dlg = new dijit.TooltipDialog({ 
    content: dlgDiv, 
    onBlur: function() { 
     popup.close(this); 
     this.destroyRecursive(); 
    } 
}); 

// you can create any content within dlgDiv at here dynamicly 

dojo.popup.open({ 
    around: yourArondNode , 
    orient: ["below", "before", "after", "above"], 
    popup: dlg 
}); 
dlg.focus();