How to render JSF controls dynamically using AJAX

Posted on 2009-04-20
Medium Priority
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
  • 3
  • 2

Accepted Solution

knrrjohle earned 1500 total points
ID: 24212737
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
ID: 24214300
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??

Expert Comment

ID: 24214549
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
ID: 31572211
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
ID: 24239321
How to make a JSF Component and a Tag Library of my own? Any good tutorial/article is out there??

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

621 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