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

Question

我有一个简单的 XPage，它允许用户使用单选按钮通过简单的 Yes/No/NA 响应来回答问题。我重新设计了单选按钮的样式，使其看起来像一个 bootstrap 按钮组，以使其在视觉上对用户来说更有趣。如果用户选择 "Fail" 然后他们会被告知他们需要做其他事情 - 只需简单地部分刷新页面下方的 div 即可轻松完成。

一切正常。

我遇到的问题是我想要这样当用户选择一个选项时，我想向所选选项添加一个新的 class 或 "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 会根据文档数据源 ('item') 评估和 apply/remove 'active' 样式价值。我也尝试过使用 dojo.addClass、dojo.removeClass、XSP.partialRefreshGet 和其他选项。我不介意解决方案是什么，只要它有效且有效即可。我不希望将 actionAlert 面板移动到与单选按钮相同的容器中，而且我无法刷新整个页面，因为还有其他字段会丢失它们的值。

一些注意事项：

我没有使用 RadioGroup 控件，因为它输出 table，而且我还没有时间为它编写自己的渲染器。单个单选按钮控件可以很好地满足我的需要。
我最初尝试使用 "data-toggle='buttons'" (source) 的完整 Bootstrap 解决方案，它可以很好地应用 "active" 样式，但不可避免地会阻止部分刷新工作。
单选按钮样式明显不Bootstrap标准

任何帮助指示，或者最好是可行的解决方案，我们将不胜感激。

Answer 1

您需要将部分刷新对准包含所有单选按钮的 div。给它一个id，这样你就可以解决它。

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

Answer 2

离开这个问题，几杯啤酒和一集 iZombie 之后，我意识到我做错了什么并解决了它。因此，对于后代来说，这是我发誓我之前尝试过但现在显然有效的简单解决方案：

<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，而应该已经在onComplete 事件处理程序。它必须链接到另一个部分刷新，以便它运行s 在它之后，而不是同时。我最终做对了 - 但忽略了我将在第 3 点中提到的内容。
在我最初尝试使用 Dojo 时，我的第一个错误是尝试定位单选按钮的 ID，例如：

dojo.addClass(dojo.byId('#{id:radio2}'),'active');

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

具有讽刺意味的是，我解决了第一个问题，记得将 XSP.partialRefreshPost 放入 onComplete - 然后在尝试运行 Dojo.addClass() 时没有将其删除.所以我没有注意到 addClass 定位错误元素的错误，因为在它运行之后，部分刷新更新了容器并删除了我刚刚添加的 class 这让我觉得没有任何效果.

所以现在我有一些样式整齐的单选按钮，它们看起来不像单选按钮，它们都是托管的客户端，没有任何不必要的服务器部分刷新行程，除非我实际上需要从服务器。重要的教训是 - 有时您只需要暂时离开一个问题，然后再以全新的眼光重新审视它。

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

How can I change the styleClass of a control while also doing a partial refresh on another component?

dojo

xpages