jsf 中的 ajax 更新后 JQuery 不工作

Question

我有一个问题。我在 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>

请帮助您解决问题。谢谢。

Answer 1

将您的js代码放入函数中，并在p:ajax的oncomplete中调用它

像这样

<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 而不是整个页面重新加载)

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