How to add jsf components in javascript?

Question

Is it possible to add JSF Components using javascript? In my case , on change of a select option , i need to display a different combination of input controls (like text box(s)). I thought i could use a element and innerHTML property to display the dynamic controls.But it seems to not work!!!

<h:selectOneMenu id="browseType" class="TextBlackNormal"
                            value="#{adminBean.browseType}" onchange="showDynamicBox(this);"
                            valueChangeListener="#{adminBean.theValueChanged}">
                            <f:selectItems value="#{adminBean.browseTypeList}" />
                        </h:selectOneMenu> &#160;&#160;&#160;</td>
                        <td>
                        <div id="dynamicBox" style="display:block"><h:inputText
                            class="TextBlackNormal" size="32" name="browseValue"
                            id="browseValue" value="#{adminBean.browseValue}" /></div>
                        </td>

javascript code : ~~~~~~~~~~~~~~~~

  function showDynamicBox(selectObjj)
{
    //alert('showDynamicBox ' +showDynamicBox);
    if(selectObjj.options[selectObjj.selectedIndex].value=='IBD/Office/IP'
        || selectObjj.options[selectObjj.selectedIndex].value=='APA#' )
    {
        alert('just about to change');
        document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="3" name="val1" id="val1" /> <h:inputText class="TextBlackNormal" size="3" name="val2" id="val2" /> <h:inputText class="TextBlackNormal" size="3" name="val3" id="val3" /> ';
        alert(' --> ' +document.getElementById("dynamicBox").innerHTML);
    }else{
        alert('back to pavillion');
        document.getElementById("dynamicBox").innerHTML='<h:inputText class="TextBlackNormal" size="32" name="browseValue" id="browseValue" value="#{adminBean.browseValue}" />';
    }

}

Answer 1

Is it possible to add JSF Components using javascript?

No - that would be a security nightmare.

JSF controls run on the server (though might emit JavaScript for a richer client-side experience). Those h:foo elements are interpreted by the server's JSP compiler when it translates the JSP to Java.

JavaScript runs in the browser.

I suggest stating what you want to try and achieve and then ask for suggestions about how to do it using JSF.

Answer 2

As McDowell says, you can't add a component to the JSF tree via Javascript, but it sounds like all that you want to do is to swap controls on the page between one big input box or three small ones.

There are several ways to do this:

1. Have all controls on the page and show/hide them with javascript. You're doing similar already but bind the 3 small boxes to backend values and toggle display none/block rather than dealing with innerHTML.

2. Have one set of controls on the page and render them selectively with ajax (eg. richfaces).

Answer 3

You can't add jsf components with javascript. You can simply manipulate the visibility (css display and visibility properties) of existing components.

(and you can use jQuery together with richfaces.)