How to add jsf components in javascript?
- by Guru
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>    </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}" />';
}
}
