如何在javascript中添加jsf组件？答案

【问题标题】：How to add jsf components in javascript?如何在javascript中添加jsf组件？
【发布时间】：2010-05-05 02:58:50
【问题描述】：

是否可以使用 javascript 添加 JSF 组件？就我而言，在更改选择选项时，我需要显示输入控件的不同组合（如文本框）。我以为我可以使用元素和 innerHTML 属性来显示动态控件。但它似乎不起作用！！！

<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 代码： ~~~~~~~~~~~~~~~~~~~

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

}

【问题讨论】：

在浏览器中打开一个 JSF 页面。右键单击并查看源代码。你现在醒了吗？

标签： javascript html jsf

【解决方案1】：

是否可以使用 javascript 添加 JSF 组件？

不，那将是一场安全噩梦。

JSF 控件在服务器上运行（尽管可能会发出 JavaScript 以获得更丰富的客户端体验）。这些h:foo 元素由服务器的JSP 编译器在将JSP 转换为Java 时进行解释。

JavaScript 在浏览器中运行。

我建议说明你想要尝试和实现的目标，然后就如何使用 JSF 提出建议。

【讨论】：

【解决方案2】：

您不能使用 javascript 添加 jsf 组件。您可以简单地操作现有组件的可见性（css display 和 visibility 属性）。

（您可以将jQuery 与richfaces 一起使用。）

【讨论】：

【解决方案3】：

正如 McDowell 所说，您无法通过 Javascript 将组件添加到 JSF 树，但听起来您想要做的只是在一个大输入框或三个小输入框之间交换页面上的控件。

有几种方法可以做到这一点：

拥有页面上的所有控件，并且使用 javascript 显示/隐藏它们。您已经在做类似的事情，但将 3 个小框绑定到后端值并切换显示 none/block 而不是处理 innerHTML。
在页面上有一组控件并使用 ajax 有选择地呈现它们（例如 Richfaces）。

【讨论】：