2

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

Tiny
  • 27,221
  • 105
  • 339
  • 599
user2061576
  • 33
  • 3
  • 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 Aug 12 '15 at 08:56
  • Thanks ironmouse, I'll be doing exactly that. It is adding some extra effects but I'll be removing those and simplifying things. – user2061576 Aug 12 '15 at 18:57

1 Answers1

1

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.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks BalusC, you always put in so much effort. The jQuery function does add some effects etc. when applying the styles, but I think I'm going to remove it and just use the actual classes from a .css file. The fade in effect is starting to look a bit retro anyway :-) – user2061576 Aug 12 '15 at 18:53
  • I cannot use the jsf.ajax.addOnEvent script, I don't want the function to run on every ajax request. But I will be writing some custom components as you suggested to standardize my tags. – user2061576 Aug 12 '15 at 18:55
  • You're welcome :) The effect could perhaps be done via `$(document).on(...)` syntax. See also a.o. http://stackoverflow.com/questions/14400624/jsf-primefaces-ajax-updates-breaks-jquery-event-listener-function-bindings Further I'd like to note that tagfiles are not same as custom components. Click that "tagfiles" link in answer for detail. – BalusC Aug 12 '15 at 19:21
  • Yes sorry, that's what I meant, tagfiles. I do however have custom components as well which accepts attributes and builds up logical blocks of jsf, which were being repeated everywhere. But I keep it as simple as I can. – user2061576 Aug 12 '15 at 19:38