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

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

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

而不是：

this.myTooltip.content = newContent;

Answer 2

看起来你永远不会重置tooltipDialog的内容。你创建它一次，但一旦创建它（new dijit.TooltipDialog({...})）它就会保持静止。

我不知道Dojo API。但是你可以直接设置内容值吗？也许在你的第一个else之后立即：

tooltipDialog.content = infoText;

这只是一个猜测，但如果Dojo的API足够简单，那可能就行了。

如果没有，您可能需要删除if (!tooltipDialog) {支票。

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();

动态更改ToolTipDialog内容

3 个答案: