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}" />';
    }

}

Open a JSF page in webbrowser. Rightclick and View Source. Are you now waked up? — BalusC
– BalusC, Commented May 4, 2010 at 12:32

McDowell · Accepted Answer · 2010-05-04 07:53:11Z

4

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.

answered May 4, 2010 at 7:53

McDowell

109k31 gold badges207 silver badges272 bronze badges

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

Comments

Bozho · Accepted Answer · 2010-05-04 18:58:50Z

1

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.)

edited May 4, 2010 at 18:58

answered May 4, 2010 at 9:00

Bozho

599k147 gold badges1.1k silver badges1.2k bronze badges

Comments

Damo · Accepted Answer · 2010-05-04 08:57:25Z

0

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:

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.
Have one set of controls on the page and render them selectively with ajax (eg. richfaces).

answered May 4, 2010 at 8:57

Damo

11.6k6 gold badges59 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to add jsf components in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related