How to render JSF controls dynamically using AJAX

Posted on 2009-04-20
Last Modified: 2013-11-24
I am new to JAVA and JSF. I am recently started doing a web project. First we started using plain JSP and servlets and now we are going to use JSF.

Now I am facing one problem with JSF. In a JSP page, I am having a combobox and a div and when i am selecting a value from the combo box, the div should be filled with some controls(like text boxes and comboboxes, buttons, etc) according to the selection.

I have done this in plain JSP with the help of XML/XSLT, AJAX and JavaScript. i.e. XML contains the details of the controls and XSLT transformer will give me controls in a string format in the server, AJAX helps to retrieve it and I have to simply set the div.innerHTML property to that string. It is working fine.

Now for JSF, I have modified my XML file by adding JSF controls, and it inturn returns the corresponding string having JSF controls easily, but i could not set it directly to div's innerHTML as the String contains JSF controls (Moreover, these JSF controls are linked with JAVA beans).

Is there any provision to add JSF controls to a running page dynamically and is there any provision to convert the above mentioned string of JSF controls to normal HTML controls, like the JSF taglibraries doing.??
Question by:Gautham Janardhan
    LVL 2

    Accepted Solution

    i suggest you use a jsf ajax framework, like ICEFaces or RichFaces for doing so.

    in richfaces you can define ajax regions, which you can reRender on certain events

    something like this:

    <h:selectBooleanCheckbox value="#{bean.checkbox}">
      <a4j:support event="onclick" reRender="ajaxPanel"/>

    <a4j:outputPanel id="ajaxPanel">
       <c:if test="${bean.checkbox != 1}">
            .... put your controls inside

    checkout richfaces livedemo to see some other examples

    i hope i could help somehow
    LVL 29

    Author Comment

    by:Gautham Janardhan
    Thanks for the reply..

    I have tried RichFaces.. But my actual problem couldnot be solved...

    As I mentioned above, I am having a String in my backing bean, say MyBean.controls, which is having the JSF Controls. I want to put that string here:

    <a4j:outputPanel id="ajaxPanel">
       <c:if test="${bean.checkbox != 1}">
                             //       I need  to place the controls in #{MyBean.controls} here...

    like we are doing with plain html controls as


    Is it possible with the JSF controls??
    LVL 2

    Expert Comment

    sorry, english isnt my native language, but if your question is, to create jsf controls programatically and add them to the componenttree dynamically - yes thats possible

    but not by creating the html and parse the string like that, but by creating objects in your backingbean and adding them to the tree

    you can, nontheless get the FacesContext in your bean and get the responsestream.. and do some dirty tricks in there, but i wouldnt recommend it...
    LVL 29

    Author Closing Comment

    by:Gautham Janardhan
    I have decided to use ajax4jsf.. Instead of making xml files of JSF Controls, I am going to make JSF Compenents with the JSF controls..
    LVL 29

    Author Comment

    by:Gautham Janardhan
    How to make a JSF Component and a Tag Library of my own? Any good tutorial/article is out there??

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Making a simple AJAX shopping cart Couple years ago I made my first shopping cart, I used iframe and JavaScript, it was very good at that time, there were no sessions or AJAX, I used cookies on clients machine. Today we have more advanced techno…
    Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
    This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
    The viewer will learn how to count occurrences of each item in an array.

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now