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

Question

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

In general people steer away from inline js because it blocks page load which blocks resource requests and causes slowness to the user, along with poor IDE support in the past. It sounds like the inline js is quicker for you, which my be a way to get around a design fault. Everything has a place, so you would need to give a more thorough example of when/why you are using it. — Daniel Moses, May 13 '13 at 19:44
How's this directly related with JSF? Note that in this case JSF will just act as HTML generator, nothing else. You could have the same JS problems with another Java web framework or even with another technology like ASP.Net or PHP. — Luiggi Mendoza, May 13 '13 at 21:07
@David - http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/ — Ioannis Deligiannis, May 13 '13 at 21:54
@Luiggi - It is only related to JSF because I am developing custom components with JSF. Because JSF has a few ways that you add JS (as part of the framework) and due to JSF/JS libs, I hoped that the answers would be related to that. Also note that JSF can also render and/or bind JS as well. — Ioannis Deligiannis, May 13 '13 at 21:59
This last piece of info **must be** as content on your question to receive a specific answer on the subject. In its current state, your question looks like *I have to add JS code in `document.ready` but I don't want to for this debate between maintainable code Vs performance*. — Luiggi Mendoza, May 13 '13 at 22:01
@DMoses - I am developing some custom JSF components. In my view any JS behaviour should be encapsulated inside the component (i.e. let JSF render and manage JS resources). I don't think that anyone can argue that the code is more maintainable and clean if I do so. As I have no experience with JS and very little with HTML, I can not discount the opinion of my HTML/JS developer when she says that -this is a bad idea- and that we should apply JS in `document.ready`. I was hoping that someone could give me a rule of thumb (eg. could be just pros/cons) that can help me make a decision. — Ioannis Deligiannis, May 13 '13 at 22:09
Looks like you didn't understand my last comment. I agree with your info, but in your question as-is, it doesn't provide any sign of why would you want to handle this. In your reply to my first comment you add this info, and then I just said **that info** must be part of your question as well. — Luiggi Mendoza, May 13 '13 at 22:20
@Luiggi - You are right, I hadn't understood your point. I updated the question - thanks — Ioannis Deligiannis, May 14 '13 at 08:12
The best answer I found so far is this [by BalusC][1] [1]: http://stackoverflow.com/questions/12615556/integrate-javascript-with-jsf-the-clean-way — Ioannis Deligiannis, May 14 '13 at 10:04
Could you please show your code and explain a little more the performance issues that you are having? — Rodmar Conde, May 14 '13 at 12:00
I am not having performance issues on a single component. But if for example you have a look in RichFaces Demo which is mainly in-line and stackoverflow.com that is not, you see a considerable performance decline. I have added a URL above and there are plenty out there that says that in-line JS is bad for caching & performance. I am no expert JS/HTML so I can not really comment if this is true or not. — Ioannis Deligiannis, May 14 '13 at 12:07
Please ask about the concrete problem, not about "Which is the best". Just ask the question about the concrete problem the smart way. The best answer is implicitly already the best practice. I made a start by editing the bad title accordingly. It's now your turn to reshape the question. — BalusC, May 14 '13 at 12:16
@BalusC - Will do. It is hard to express things outside you knowledge domain ;) — Ioannis Deligiannis, May 14 '13 at 12:38
Just tell about the concrete problem? *"I have a page with jQuery document.ready() which binds to the HTML representation of a JSF component. When this is re-rendered by a JSF ajax request, then all jQuery bindings are lost. How is this caused and how can I solve it?"* Doesn't seem that hard to ask? You've already perfectly identified the concrete problem. You're only telling a long winded story around it, explicitly asking for "best practices". That's not how it works here. Look for a discussion fourm instead if you want lists of opinions instead of a single and correct answer. — BalusC, May 14 '13 at 12:40

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

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,

edited May 23 '17 at 12:14

Community

1
1

answered May 14 '13 at 08:24

Rodmar Conde

956
1
12
24

score 1 · Accepted Answer · answered May 14 '13 at 11:53

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;
         }
     });

OmniFaces has an [``](http://showcase.omnifaces.org/components/onloadScript) for the purpose. — BalusC, May 14 '13 at 12:17

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

2 Answers2