JSF and Javascript and HTML - How to create a highly dynamic interface

Question

I'm new to JSF and developing web applications with Java. I'm basically developing a pretty complex interface, with lots of AJAX content loaded (Pagination, posts, comments, ...).

I'll start with a basic example, a user writes a comment. The form is sent through JSF f:ajax to the server and then I can do a render="sectionId", but the problem is, that I want to make the post not just appear, but slide down and even toggle background color.

How can I obtain this sort of effect using JSF and Javascript? The designer (who knows only HTML/CSS/Javscript/Jquery) says that usually, he just does a Jquery AJAX call to a page with a string of data and then the page generates a JSON encode that he can then use to do all the magic.

I'm not asking how you do the toggle/color in jquery, it's the communication between the JSF and Javascript. So how can I send to his javascript the newly generated HTML code, so that he can what he wants with it.

Thanks for any help.

Remember that JSF components generate plain HTML. You <h:commandButton>s will become <input type="submit />, <h:panelGrid> will become <table> and so on, so you can use jQuery as long as you know how the HTML will be generated for your page(s). — Luiggi Mendoza
– Luiggi Mendoza, Commented Aug 5, 2012 at 4:45
Thanks. How can the javascript catch the newly generated HTML? Once the designer can catch it, he will be able to put it where he wants, the way he wants... — denislexic
– denislexic, Commented Aug 5, 2012 at 5:29
Thanks again. But we do not have a problem understanding the JSF tags. The problem is when JSF does an AJAX event and generates new HTML (such as the post display in my example), instead of using the render, we would like the HTML to be given to our custom javascript so that he can do the funky effects. — denislexic
– denislexic, Commented Aug 5, 2012 at 6:37
There is the onevent tag attribute in the <f:ajax> that receives a javascript method. You can handle the ajax status in this method. — Luiggi Mendoza
– Luiggi Mendoza, Commented Aug 5, 2012 at 6:42

BalusC · Accepted Answer · 2013-03-13 03:37:26Z

2

JSF is a server-side technology and you'd typically conditionally display content within a construct such as a panelGroup, so why not include your jquery magic inside a ready handler inside the conditionally rendered panelGroup like this:

<h:panelGroup id="ajaxRenderTarget">
  <ui:repeat value="#{bean.listOfComments}" var="var">
  ... display required information ...
  </ui:repeat>
  <h:panelGroup rendered="#{bean.showJqueryEffects}">
    <script type="text/javascript">
        jQuery(function($) {
            ... funky effects here ...
        });
    </script>
  </h:panelGroup>
</h:panelGroup>

Where I've used ui:repeat in the above example you could be and probably would be using any data iteration component from jsf or a component library such as a datatable.

Another thing to consider is OmniFaces which has <o:onloadScript> and a host of other tags which are worth knowing about.

One mistake to avoid is trying to load JSF pages using jQuery ajax functions, the server will have no state of the component tree and it won't work.

edited Mar 13, 2013 at 3:37

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

answered Aug 5, 2012 at 7:42

Oversteer

1,8272 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

denislexic Over a year ago

Awesome, thanks. Using the simple example, that would mean that the I would be default do display:none for the comment, and then when it reads the script, do the slideDown and toggleColor... right?

Oversteer Over a year ago

Not quite - when the EL expression evaluates to rendered="#{false}" the HTML isn't sent to the client at all. Only when the boolean expression is set to true and either the page reloaded or the enclosing component re-rendered via ajax will this content be sent to the client browser.

Collectives™ on Stack Overflow

JSF and Javascript and HTML - How to create a highly dynamic interface

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related