将JavaScript与JSF和Facelets结合使用

我想使用JavaScript来操作JSF/Facelets页面中隐藏的输入字段。当页面加载时，我需要将一个隐藏字段设置为客户端的颜色深度。

从我的Facelet：

<body onload="setColorDepth(document.getElementById(?????);">
<h:form>
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

JSF处理页面时，当然是在更改元素的ID。从我的JavaScript代码中引用这些元素的最佳方式是什么？

您需要设置表单的ID，这样您就可以知道它是什么。然后您就可以构造实际的元素ID。

<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">
<h:form id="myForm">
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>

如果你不想设置表单的ID字段，你可以在运行时找到它，比如：

<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">

查看生成的html源代码，并查看jsf为标记的id属性命名了什么。

您很快就会看到命名约定是如何工作的。它通常类似于FORMNAME:FIELDNAME

您可以使用UIComponent.getClientId（FacesContext）返回的控件的clientId。有关示例代码，请参阅此处。

全局定义一个函数findElement并在的任何地方使用它

function findElement(elementId) {
        if(document.getElementById(elementId)) return elementId;
        for(var  i = 0; i < document.forms.length; i++) {
            if(document.getElementById(document.forms[i].id + ':' + elementId)) {
                return document.forms[i].id + ':' + elementId;
            }
        }
        return null;
    }

    <body onload="setColorDepth(findElement('colorDepth'));">

相关内容

最新更新

热门标签：