Geek Answers Handbook

JQuery not working after ajax update in jsf

I have a problem. I use jquery in my jsf and primefaces application to simplify some operations. JQuery works fine on the download page, but when I update some jquery component it doesn't work. For instance:

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

+3
source share
3 answers

Put your js code in function and call it in oncomplete your p:ajax

Like this

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

js code:

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

Explanation:

There is no ready event after ajax arithmetic (in the end it is ajax, not a full page reload)

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

+10
source

to fix the script that you are using, the selection of elements by id should be like this: $ ('#' + elemId)

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

Of course, I do not think that the ID for the button will be sButton when the page is displayed.
Usually in Jsf, the component identifier will be formID: componentId .
Co In your case, since there is no identifier for the form, JSF will generate a dynamic identifier for the component, such as jdt_k159, so you will be the id of the jdt_k159: sButton button.
And also use $ ('id = ["xxx: yyy"]') for safty in jQuery.

Give the FORM identifier as follows:

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

Links for links:
Find component by ID in JSF
How to access jsf component id in jquery?

0
source

More articles:


All Articles