jQuery applying css classes after f:ajax

2
votes

I have looked around and couldn't get a straight answer regarding my basic problem.

We have a site which applies a bunch of basic css classes to elements using jQuery in document.ready(). This works fine at first.

But now we have also started using JSF 2.0 with facelets and have a few f:ajax tags that rerender parts of the page based on events. As you can imagine the rerendered parts display without these styles because the jQuery function is not called again during the ajax call.

I have now played around and found that you can add onevent to f:ajax and force the main jQuery function to be called again. But this doesn't feel very elegant and I need to add it to all f:ajax tags. Plus I'm experiencing some unexplained behaviour.

So my questions are:

  1. Does it still make sense to apply style classes in document.ready()? Or is it bad practise in this instance? Should I simply add the classes to the elements?
  2. Is jQuery ajax a viable alternative to f:ajax?

Any opinions or help or guidance would be very much appreciated.

Thanks

1
jquerycssajaxjsfjsf-2
It depends on what the CSS class is doing. If it's just for a static design purpose (not for altering the design due to some changed values) I recommend to set the CSS class properties in an external .css file without jQuery. - ironmouse
Thanks ironmouse, I'll be doing exactly that. It is adding some extra effects but I'll be removing those and simplifying things. - user2061576

1 Answers

1
votes

I have now played around and found that you can add onevent to f:ajax and force the main jQuery function to be called again. But this doesn't feel very elegant and I need to add it to all f:ajax tags.

You can use jsf.ajax.addOnEvent() to apply it to all <f:ajax> requests. See also How to re-execute javascript function after form reRender?

Does it still make sense to apply style classes in document.ready()? Or is it bad practise in this instance? Should I simply add the classes to the elements?

It indeed indicates a design/thinking problem. For instance, why don't you just use those jQuery selectors instead of the CSS classes you intend to add? To add CSS classes to certain elements, you had to select them using a CSS selector anyway, right? What's wrong with using exactly that CSS selector for the final purpose?

In Facelets perspective, you can consider creating tagfiles to reduce code boilerplate. You can wrap <h:inputText styleClass="some-specific-class"> in a /WEB-INF/tags/inputText.xhtml and keep using <my:inputText> instead.

Is jQuery ajax a viable alternative to f:ajax?

It's doable. There are even open source examples available, like PrimeFaces which is built all around jQuery and jQuery UI.