JQuery not working after ajax update in jsf

Question

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.

Try changing `$(selector)`'s to `jQuery(selector)`. May be there is a conflict. — Dhrubajyoti Gogoi, Jun 26 '13 at 07:42
Maybe I did not correctly explained my problem. When page is open, jquery works everywhere on page. But when I update outputPanel with ajax, jquery do not work in outpuPanel. Jquery continue works in another parts of page. — Guwanch, Jun 26 '13 at 09:46

Daniel · Accepted Answer · 2013-06-26T18:17:28.310

11

Place your js code into a function and call it in oncomplete of 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 not ready event after primefaces ajax (after all it an ajax and not a full page reload)

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

edited Jun 26 '13 at 18:17

answered Jun 26 '13 at 07:56

Daniel

36,833
10
119
200

Maybe I did not correctly explained my problem. When page is open, jquery works everywhere on page. But when I update outputPanel with ajax, jquery do not work in outpuPanel. Jquery continue works in another parts of page. – Guwanch Jun 26 '13 at 09:42
Thank you Daniel for your answer. It is working oncomplete event in my application. – Guwanch Jun 26 '13 at 11:30
You are welcome, you mean that your `onsuccess` does not fire? (place and `alert('hello')` to see if the `onsuccess` works... because if its not , it might means that there is some error somewhere... take a look at the browser console or networking response from server... (in chrome dev tools / bugzilla) – Daniel Jun 26 '13 at 11:41
1

Onsuccess is indeed wrong hook if you intend to apply jQuery on the HTML elements which are only available after actual ajax update: http://stackoverflow.com/questions/15028868/primefaces-pdialog-doesnt-always-show-up-if-update-dlg-in-commandbutton/15029403#15029403 – BalusC Jun 26 '13 at 12:37
@BalusC, but in plain `f:ajax` the `success` comes after `complete` and the jquery changes applied just fine..., primefaces changed the order of the terms/events in contradiction to the `f:ajax`? – Daniel Jun 26 '13 at 17:42
2

That's in turn true. I must however admit that the PrimeFaces naming makes more sense. "success" must be interpreted as in, "ajax response is retrieved successfully". The failure condition is "error", which is then to be handled as `onerror`. If we follow standard JSF naming, you'd have `onerror` as counterpart of `oncomplete`. This makes no sense. – BalusC Jun 26 '13 at 17:59
@BalusC , Thanks for the info , Since I'm a light primefaces user I wasn't aware of that... will fix my answer, And indeed you are right primefaces naming makes more sense , its just confuses that it does not match the jsf naming... Thanks again! – Daniel Jun 26 '13 at 18:17
I have the same problem I have an script that execute selectors with Jquery and add some funcionality to p:datatable and it works ok until when I open and close a p:dialog wich update some parte of my principal page, my script simply not work. It seems that it goes away. So calling like a function: (p:dialog event), it seems works but I have to put this snippet in all my app(p:dialogs), so my script might works. That is the solution? – Fernando Pie Apr 11 '17 at 19:36
1

@FernandoPie , I suggest you to try the Primefaces - AjaxFramework - Status - https://www.primefaces.org/showcase/ui/ajax/status.xhtml , something like this should be used, `` – Daniel Apr 12 '17 at 06:43

score 1 · Answer 2 · answered Jun 26 '13 at 07:43

1

fix the script you're using, selecting elements by id should be like that: $('#' + elemId)

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

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

})
</script>

answered Jun 26 '13 at 07:43

saleem

11
2

Sorry I make an error when I wrote an example. I mean than when page loaded jquery work fine. But when update outputPanel jquery not working. – Guwanch Jun 26 '13 at 07:52

score 0 · Answer 3 · edited May 23 '17 at 12:10

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

Give ID to the FORM 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>

Ref Links:
Find component by ID in JSF
How to refer to a JSF component Id in jquery?

JQuery not working after ajax update in jsf

3 Answers3

Linked