Dojo 如何在对另一个组件进行部分刷新的同时更改控件的样式类？

我有一个简单的XPage，它允许用户使用单选按钮以简单的Yes/No/NA回答问题。我重新设计了单选按钮的样式，使其看起来像一个引导按钮组，以使用户在视觉上更感兴趣。如果用户选择“失败”，则会通知他们需要执行其他操作—只需对页面下方的div进行简单的部分刷新即可轻松完成

这一切都很好

我遇到的问题是，我希望这样，当用户选择一个选项时，我希望向所选选项添加一个新的“active”类，以便它以漂亮的颜色高亮显示。但就我的一生而言，我无法让它发挥作用，尽管我确信这是一个直截了当的问题，但我再也看不见树木了

我对单选按钮代码的当前（节略）迭代如下：

<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">          
    <xp:radio text="${lbl.kwPass1}" id="itemPass"
        styleClass="btn btn-pass #{(item.itemResult eq '0')?'active':''}" groupName="itemResult"
                selectedValue="1">
        <xp:eventHandler event="onchange" submit="true"
                    refreshMode="partial" refreshId="actionAlert">
            <xp:this.script><![CDATA[XSP.partialRefreshPost('#{id:edit-result}');]]></xp:this.script>
        </xp:eventHandler>
    </xp:radio>

<!-- other radio buttons -->
</xp:div>

<!-- other page compenents -->
<xp:panel id="actionAlert">
    <!-- panel content and appropriate rendered value -->
</xp:panel>

这是在尝试对单选按钮容器执行链接部分刷新，以便EL根据文档数据源（“项”）值评估并应用/删除“活动”样式。我还尝试使用dojo.addClass、dojo.removeClass、XSP.partialRefreshGet和其他选项。我不介意解决方案是什么，只要它是有效的。我不希望将actionAlert面板移动到与单选按钮相同的容器中，也不能进行整页刷新，因为还有其他字段会丢失其值

一些注意事项：

• 我没有使用RadioGroup控件，因为它输出一个表，而我还没有为它编写自己的渲染器。单个单选按钮控件可以很好地满足我的需要
• 我最初尝试使用完整的引导解决方案，即使用“data toggle='buttons'”（），这可以很好地整理应用“active”样式，但是不可避免地会阻止部分刷新工作
• 单选按钮样式显然不是引导标准

---

任何帮助指针或工作解决方案都将不胜感激。

您需要将部分刷新对准包含所有单选按钮的

div

。给它一个id，这样你就可以寻址了

---

顾名思义，部分刷新只刷新一个元素及其内容。因此，您的目标是包含所有需要重新计算的项的元素

您需要将部分刷新对准包含所有单选按钮的

div

。给它一个id，这样你就可以寻址了

---

顾名思义，部分刷新只刷新一个元素及其内容。因此，您的目标是包含所有需要重新计算的项的元素

离开这个问题，喝了几杯啤酒，看了一集《伊佐姆比》，我意识到自己做错了什么，并解决了问题。因此，对于子孙后代来说，我发誓我以前尝试过一个简单的解决方案，但现在显然奏效了：

<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">          
    <xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
        styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
            <xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
                    dojo.query('.btn-pass').addClass('active');]]></xp:this.script> 
        </xp:eventHandler>
    </xp:radio>
<!-- et cetera -->

我犯了很多错误：

在我的问题代码中，我在单选按钮的CSJS脚本中调用XSP.partialRefreshPost，而它本应在eventHandler的onComplete中。它必须链接到另一个部分刷新，以便在它之后运行，而不是同时运行。我最终确实做到了这一点——但忽略了我将在第3点中谈到的一些事情

在我最初尝试使用Dojo时，我的第一个错误是尝试以单选按钮的ID为目标，类似于：

addClass（dojo.byId（'#{id:radio2}'），'active'）

只要您记住XPage上单选按钮的ID指的是实际的单选按钮控件，而不是标签包装，这实际上是按照预期工作的；这个标签就是我想要的样式。所以类“active”实际上被添加了，只是没有添加到我认为是的元素中。我应该在我的浏览器代码检查器中发现这一点，但第三件事我错了：

具有讽刺意味的是，我解决了第一个问题，记得将XSP.partialRefreshPost放入onComplete中，然后在尝试运行Dojo.addClass（）时没有删除它。因此，我没有注意到addClass指向错误元素的错误，因为在它运行后，部分刷新更新了容器并删除了我刚才添加的类，这让我觉得什么都没用

---

所以现在我有了一些样式整洁的单选按钮，看起来不像单选按钮，它都是托管客户端，没有任何不必要的部分刷新到服务器，除非我实际上需要从服务器上查找内容。重要的教训是——有时你只需要从问题中走出来，然后用新的眼光重新审视它。

从问题中走出来，喝几杯啤酒，看一集《伊佐姆比》，后来我意识到我做错了什么，并解决了问题。因此，对于子孙后代来说，我发誓我以前尝试过一个简单的解决方案，但现在显然奏效了：

<xp:div styleClass="btn-group item-result" id="edit-result" loaded="${Question.open}">          
    <xp:radio text="${lbl.kwPass1}" id="itemPass" value="#{item.ItemResult}"
        styleClass="btn btn-pass" groupName="itemResult" selectedValue="1">
        <xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="actionAlert">
            <xp:this.script><![CDATA[dojo.query('.item-result > .btn').removeClass('active');
                    dojo.query('.btn-pass').addClass('active');]]></xp:this.script> 
        </xp:eventHandler>
    </xp:radio>
<!-- et cetera -->

我犯了很多错误：

在我的问题代码中，我在单选按钮的CSJS脚本中调用XSP.partialRefreshPost，而它本应在eventHandler的onComplete中。它必须链接到另一个部分刷新，以便在它之后运行，而不是同时运行。我最终确实做到了这一点——但忽略了我将在第3点中谈到的一些事情

在我最初尝试使用Dojo时，我的第一个错误是尝试以单选按钮的ID为目标，类似于：

addClass（dojo.byId（'#{id:radio2}'），'active'）

只要您记住XPage上单选按钮的ID指的是实际的单选按钮控件，而不是标签wrapp，这实际上是按照预期工作的