3

我有个问题。我在我的 jsf 和 primefaces 应用程序中使用 jquery 来简化一些操作。Jquery 在加载页面上工作正常，但是当我更新某些组件时 jquery 不起作用。例如：

<h:form>

<p:selectOneMenu value="#{contractBean.workType}" >
<f:selectItem itemLabel="" itemValue="" />
<f:selectItem itemLabel="product" itemValue="1"   />
<f:selectItem itemLabel="service" itemValue="2"   />
<f:selectItem itemLabel="product and service" itemValue="3" />
<p:ajax update="outPan" event="change" /> 
</p:selectOneMenu>

<p:outputPanel id="outPan">
<p:inpuText value="#{contractBean.workType}" id="wType"/>
<p:commandButton value="Submit" id="sButton"/>
</p:outputPanel>

</h:form>



<script type="text/javascript">
$(document).ready(function(){

$('#sButton').prop('disabled',true);
$('#wType').css({'border':'red'})

})
</script>

请帮助您的解决方案。谢谢你。

4

3 回答 3

11

将您的js代码放入 afunction并在oncomplete您的p:ajax

像这样

<p:ajax update="outPan" event="change" oncomplete="myFunc()" />

js代码：

<script type="text/javascript">
$(document).ready(function(){
    myFunc();
});
function myFunc() {
    $('#sButton').prop('disabled',true);
    $('#wType').css({'border':'red'})
}
</script>

解释：

在primefaces ajax之后没有准备好的事件（毕竟它是一个ajax而不是一个完整的页面重新加载）

如果你想在后面钩住一些js代码p:ajax，可以使用它的onsuccess属性

于 2013-06-26T07:56:47.383 回答
1

修复您正在使用的脚本，按 id 选择元素应该是这样的： $('#' + elemId)

<script type="text/javascript">
$(document).ready(function(){

$('#sButton').prop('disabled',true);
$('#wType').css({'border':'red'})

})
</script>
于 2013-06-26T07:43:38.683 回答
0

我当然不认为在呈现页面时按钮的 ID 会是sButton。
通常在 Jsf 中，组件的 Id 将是formID:componentId。
Co 在您的情况下，由于表单没有 ID，JSF 将生成动态组件 ID，例如jdt_k159，因此您的按钮 ID 将为jdt_k159:sButton。
并且还在 JQuery 中使用$('id=["xxx:yyy"]')来保证安全。

为表格提供 ID，如下所示：

<h:form id="myForm">
  ...
  ...
  <p:commandButton value="Submit" id="sButton"/>
</h:form>

<script type="text/javascript">
    $(document).ready(function(){

    $('[id="myForm:sButton"]').prop('disabled',true);
    ...
    ...
  })
</script>

参考链接：
在 JSF 中按 ID 查找组件
如何在 jquery 中引用 JSF 组件 ID？

于 2013-06-26T08:05:02.253 回答