jsf中的ajax更新后，jQuery无法正常工作 [英] JQuery not working after ajax update in jsf

问题描述

我有问题.我在jsf和primefaces应用程序中使用jquery来简化某些操作. jQuery可以在onload页面上正常工作，但是当我更新某些组件jQuery时无法正常工作.例如:

I have a problem. I use jquery in my jsf and primefaces application for simplify some operations. Jquery works fine onload page but when I update some component jquery not working. For example:

<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>

请帮助您解决方案.谢谢.

Please help with your solutions. Thank you.

推荐答案

将您的 js 代码放入function中，并在p:ajax

Place your js code into a function and call it in oncomplete of your 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>

---

说明:

---

Explanation:

primefaces ajax之后没有就绪事件(毕竟这是ajax而不是整个页面的重新加载)

There is not ready event after primefaces ajax (after all it an ajax and not a full page reload)

如果要在p:ajax之后挂接一些js代码，则可以使用其onsuccess属性

If you want to hook some js code after the p:ajax , you can use its onsuccess attribute

这篇关于jsf中的ajax更新后，jQuery无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！