CODEWITHSUNDEEP
javascriptjqueryajaxjsf
Ioannis Deligiannis
Ioannis Deligiannis

Reputation: 2719

How to re-apply JS/jQuery document.ready when a JSF component is re-rendered?

I have created a Calendar component and all the JS is applied to it on document.ready. When I do an Ajax call and re-render the component, the JS/JQuery is not there anymore. This can be solved by adding the JS in-line but has a performance overhead. How can I re-apply my JS behaviour after the component is re-rendered?

My generated HTML code looks like this.

<div class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
    </span>
</div>

Thanks

Upvotes: 0

Views: 1319

Answers (2)

Ioannis Deligiannis
Ioannis Deligiannis

Reputation: 2719

The closest I have come up with is to register the ajax callback on document.ready and apply the JS for the components (either to the whole page or get the rendered ids and apply it to that). Would be cool if somehow this could come out-of-the-box.

 jsf.ajax.addOnEvent(function(data) {
         var ajaxstatus = data.status; 

         switch (ajaxstatus) {
             case "success": 
              alert('load the JS thing')
                 break;
         }
     });

Upvotes: 1

Rodmar Conde
Rodmar Conde

Reputation: 956

I think that the best practice to use javascript inside java generated code (JSF), is to organize them into JSF composite components. It is a good reusable practice. Composite components where included in version 2.0 of JSF.

You can look Oracle tutorial and this BalusC example.

Regards,

Upvotes: 1

Related Questions