Question

我有一个简单的XPage，让用户使用单选按钮以简单的Yes / No / NA响应回答问题。我已经将单选按钮重新设置为看起来像一个引导按钮组，以使其在视觉上对用户更有趣。如果用户选择“失败”，那么他们会被告知他们需要做其他事情 - 通过对页面下方的div进行简单的部分刷新即可轻松完成。

一切正常。

我遇到的问题是我喜欢它，以便当用户选择一个选项时，我想在所选选项中添加一个新的“活动”类，以便它以漂亮的颜色突出显示。但是对于我的生活，我无法让它发挥作用，虽然我确定这是一个直接的问题，但我再也看不到树木了。

单选按钮代码的当前（删节）迭代是：

<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'）值评估并应用/删除'active'样式。我也尝试过使用dojo.addClass，dojo.removeClass，XSP.partialRefreshGet和其他选项。我不介意解决方案是什么，只要它有效并且有效。我不希望将actionAlert面板移动到与单选按钮相同的容器中，并且我无法进行整页刷新，因为还有其他字段会丢失它们的值。

一些注意事项：

我没有使用RadioGroup控件，因为它输出了一个表，我还没有为它编写自己的渲染器。单个单选按钮控件可以正常工作。
我最初尝试使用“data-toggle ='buttons'”（source）的完整Bootstrap解决方案，该解决方案将“活动”样式排除在外，但不可避免地会阻止部分刷新工作
单选按钮样式显然不是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 -->

我错了很多地方：

在我的问题代码中，当已经在eventHandler的onComplete中时，我在单选按钮的CSJS脚本中调用了XSP.partialRefreshPost。它必须被链接到另一个部分刷新，以便它在它之后运行，而不是同时运行。我最终做到了这一点 - 但忽略了我将在第3点中提到的一些事情。
在我最初使用Dojo的尝试中，我的第一个错误是尝试定位单选按钮的ID，如：

dojo.addClass（dojo.byId（ '＃{ID：第二广播电台}'）， '主动'）;

这实际上按预期工作，只要你记得XPage上单选按钮的ID是指实际的单选按钮控件而不是标签包装;标签是我想要的风格。因此，实际上正在添加“活跃”类，而不是我认为的那个元素。我应该在我的浏览器代码检查器中发现这个，除了第三件事我错了：

具有讽刺意味的是，我整理了第一个问题，记得将XSP.partialRefreshPost放入onComplete中 - 然后在尝试运行Dojo.addClass（）时没有删除它。因此我没有注意到addClass定位错误元素的错误，因为在运行之后，部分刷新更新了容器并删除了我刚刚添加的类，这让我觉得没有任何工作。

所以现在我有一些整齐的样式单选按钮，看起来不像单选按钮，它是所有托管客户端，没有任何不必要的部分刷新访问服务器，除非我实际需要从服务器查找东西。而重要的教训是 - 有时你只需要远离一个问题，然后再以新的眼光回到它。

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

2 个答案: