执行(打开)单击PrimeFaces中的radioButton

Question

我有两个Radio Buttons和一个Textarea.当我点击其中一个单选按钮时,我想更改Textarea的CSS; 当我点击"是"时,我想启用Textarea,当我点击"否"时,我想禁用该区域.
这是两个元素的代码:

<h:outputLabel for="data" value="Change Data" />
<p:selectOneRadio id="data" required="true" value="No">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
</p:selectOneRadio>

<h:outputLabel for="yesdata" value="Details to change data" />
<p:inputTextarea id="yesdata" />

首先,我添加了jQuery click()事件.但问题是,当我将其添加到该<ui:define name="scripts">区域时,代码将出现在正文之前,因此这将不起作用.
所以我尝试向onClick两个selectItem添加一个触发器,添加了一个方法来更改css并将其添加到脚本 -area.但是当我查看渲染的源代码时,没有onClick添加到Radio Buttons.

那么我如何通过Radio Buttons执行jQuery操作呢？

Answer 1

首先,我添加了jQuery click()事件.但问题是,当我将其添加到该<ui:define name="scripts">区域时,代码将出现在正文之前,因此这将不起作用.

只需添加target="body"即可<h:outputScript>让它在之前结束</body>.

<h:outputScript ... target="body" />

这适用于两个包含的脚本(良好实践):

<h:outputScript name="onload.js" target="body" />

和直接写在标签体中的脚本(不良做法):

<h:outputScript target="body">
    alert('Hi');
</h:outputScript>

所以我尝试向两个selectItem添加一个onClick触发器,添加了一个方法来更改css并将其添加到脚本区域.但是当我查看渲染的源代码时,没有onClick添加到Radio Buttons.

有两个问题:首先,它是onclick,而不是onClick.将onClick是无效的,因为HTML 4.01自1998年以来这是一个相当的时间前.请注意您用于学习HTML/JSF /等的资源的年龄,并确保它们不超过1〜3年,否则要非常小心.

其次,<f:selectItem>标签文档无法列出onclick属性.因此,为什么你试图把它放在那里.该<p:selectOneRadio>标签的文档中列出了onchange属性.那边你应该有更好的运气.

<p:selectOneRadio ... onchange="alert(this.value)">

顺便说一下,你的使用<p:selectOneRadio value>是错误的.它应该表示对backing bean属性的绑定.但这是一个不同的问题.

与具体问题无关,在不需要一些JS/jQuery的情况下实现需求的简单和"纯JSF"方法就是抛出一个<p:ajax>更新textarea组件并更改textarea组件的disabled属性来有条件地检查单选按钮的选定值:

<p:selectOneRadio id="data" binding="#{yesOrNo}" required="true">
   <f:selectItem itemValue="Yes" itemLabel="Yes" />
   <f:selectItem itemValue="No" itemLabel="No" />
   <p:ajax update="yesdata" />
</p:selectOneRadio>

<p:inputTextarea id="yesdata" disabled="#{yesOrNo.value != 'Yes'}" />

在此示例中,只要未选择"是",将禁用textarea.