我试图在每个部分的顶部找到一个按钮,以便在使用JavaScript单击时填写该部分的N/A收音机。我使用PrimeFaces V12 p:selectOneRadio
,在p:dataTable
中使用custom
布局,在p:headerRow
上使用groupBy
。我的JavaScript函数似乎改变了收音机的选定状态,但视图没有反映这一点。即使当我将表单提交给JSF支持bean时,我认为无线电可能实际上被选中了,但并没有直观地显示出来,唉,无线电实际上没有被选中。
x1c 0d1x的数据
<p:dataTable id="ynnrCheckListId"
value="#{cc.attrs.checklistQuestions}" var="qAndA">
<p:headerRow groupBy="#{qAndA.checklistAttribute.attributeCategory.id}">
<p:column colspan="8" sortOrder="#{qAndA.checklistAttribute.attributeCategory.headerText}">
<h:outputText value="#{qAndA.checklistAttribute.attributeCategory.headerText}" />
</p:column>
<p:column colspan="1">
<p:button itemLabel="This Section Not Applicable"
onclick="doAll(#{qAndA.checklistAttribute.attributeCategory.id}); return false;">
</p:button>
</p:column>
字符串
...在“是”列中定义自定义布局selectOneRadio
<p:column headerText="Yes" width="50">
<p:selectOneRadio id="yesNoNA" value="#{qAndA.toggleValue}" layout="custom" unselectable="true" styleClass="ppp">
<f:selectItem itemLabel="Yes" itemValue="YES" />
...
<f:selectItem itemLabel="NA" itemValue="NA" />
</p:selectOneRadio>
<div align="center">
<p:radioButton id="yes" for="yesNoNA" itemIndex="0" rendered="#{empty qAndA.toggleValue}"
disabled="#{not cc.attrs.checklistInstance.checklistEditable}" />
<h:outputText style="color: #000; font-size: 24px;" styleClass="fa-solid fa-check"
rendered="#{qAndA.toggleValue == 'YES'}" />
<h:outputText value=""
rendered="#{qAndA.toggleValue == 'NO_MAJOR' or qAndA.toggleValue == 'NO_MINOR' or qAndA.toggleValue == 'NA' or qAndA.toggleValue == 'RESOLVED_MAJOR' or qAndA.toggleValue == 'RESOLVED_MINOR'}" />
</div>
</p:column>
型
...
<p:column headerText="N/A" width="50">
<div align="center">
<p:radioButton id="na" widgetVar="na" for="yesNoNA" itemIndex="4" rendered="#{empty qAndA.toggleValue}"
disabled="#{not cc.attrs.checklistInstance.checklistEditable}"
styleClass="#{qAndA.checklistAttribute.attributeCategory.id}" />
<h:outputText style="color: #000; font-size: 24px;" styleClass="fas fa-times" rendered="#{qAndA.toggleValue == 'NA'}" />
</div>
</p:column>
型
...
将NA p:radioButton(上面)的styleClass设置为section category id是一种只查找每个section中的radio的方法。在Div的classname中设置了包含每一行无线电的节类别ID。
function doAll(divClass)
{
var divs = document.getElementsByClassName(divClass);
for (const div of divs) {
$(div).find('input:radio').each(function() {
console.log($(this).attr('id') );
console.log("radio value " + $(this).val());
console.log("is radio checked? " + $(this).prop('checked'));
$(this).prop('checked', true);
console.log("Now is radio checked? " + $(this).prop('checked'));
$(this).trigger('click');
$(this).trigger('change');
console.log("");
});
}
型
}
assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true
assignmentForm:accordion:stageGate1:ynnrCheckListId:1:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true
assignmentForm:accordion:stageGate1:ynnrCheckListId:2:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true
assignmentForm:accordion:stageGate1:ynnrCheckListId:3:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true
型
当我手动选择其中一个NA无线电,然后单击NA all按钮时,在以编程方式将radio属性checked
应用为true之前,我将checked属性设置为true。所以我觉得我在正确的HTML对象上工作。
assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? true
Now is radio checked? true
型
有什么想法吗
1条答案
按热度按时间pgpifvop1#
当涉及到PrimeFaces / jQuery UI的编程操作时,你需要像一个真实的的最终用户一样思考,而不是像一个web scraper。如果你在你最喜欢的浏览器中右键单击所需的单选按钮并检查元素,那么你会看到它是出现在检查器中的具有
.ui-radiobutton-box
类的元素,而不是隐藏的input元素。x1c 0d1x的数据
您需要在
.ui-radiobutton-box
元素上触发事件,因为它具有附加到它的必要JavaScript侦听器,它在幕后执行所有必要的隐藏输入和CSS操作。这大约是15行代码,你根本不需要在你的自定义函数中重复。换句话说,
字符串
在your test project中为我做的:
的
型