Question

I have a problem integrating JQuery with JSF.

I use Spin. and I have in my code:

<script type="text/javascript" src="#{request.contextPath}/scripts/jquery.selectbox-0.5.js"></script>
    jQuery(document).ready(function($){
      $.spin.imageBasePath = '../images/spin1/';
      $('#spin1').spin();
      $('#spin2').spin();
      $('#spin3').spin();
    }

When I invoke the page for the first time, the “spin” is being added to components.

The problem is that I have as well, and once I invoke it and update part of the page (where I have the spinners) – it doesn’t function anymore. It seems that Jquery is being invoked only on page read and once refreshing a part of it – i would execute it anymore.

I tried to use h:commandButton with f:ajax but it didn’t solve the problem.

I tried to move the script inside the form that is being rendered, but it doesn’t help

How can I solve this?

Answer 1

In a nut, you’d like to re-execute it whenever the ajax request has been completed?

Move it into a function like so:

jQuery(document).ready(function() {
    jQuery.spin.imageBasePath = '../images/spin1/';
    runSpinners();
});
function runSpinners() {
    jQuery('#spin1').spin();
    jQuery('#spin2').spin();
    jQuery('#spin3').spin();
}

This way you can reuse it in the oncomplete attribute of the <p:commandButton>.

<p:commandButton oncomplete="runSpinners()" />

Alternatively, you can also use <p:ajaxStatus> to execute it on complete of every ajax call, regardless of the button/link pressed:

<p:ajaxStatus oncomplete="runSpinners()" />