如何知道JSF组件的id以便在Javascript中使用
问题:有时您需要使用如何知道JSF组件的id以便在Javascript中使用,javascript,jsf,Javascript,Jsf,问题:有时您需要使用 getElementById,但id是在JSF中动态生成的,所以 需要一种获取对象id的方法。下面我将回答您如何做到这一点 原始问题: 我想使用下面的一些代码。如何在Javascript中引用inputText JSF组件 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/
getElementById
,但id是在JSF中动态生成的,所以
需要一种获取对象id的方法。下面我将回答您如何做到这一点
原始问题: 我想使用下面的一些代码。如何在Javascript中引用inputText JSF组件
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<title>Input Name Page</title>
<script type="javascript" >
function myFunc() {
// how can I get the contents of the inputText component below
alert("Your email address is: " + document.getElementById("emailAddress").value);
}
</script>
</head>
<h:body>
<f:view>
<h:form>
Please enter your email address:<br/>
<h:inputText id="emailAddresses" value="#{emailAddresses.emailAddressesStr}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
</h:form>
</f:view>
</h:body>
</html>
输入名称页
函数myFunc(){
//如何获取下面inputText组件的内容
警报(“您的电子邮件地址是:”+document.getElementById(“emailAddress”).value);
}
请输入您的电子邮件地址:
更新:这篇文章讨论了使用以下技术:
<script type="javascript" >
function myFunc() {
alert("Your email address is: " + document.getElementById("#{myInptTxtId.clientId}").value);
}
</script>
<h:inputText id="myInptTxtId" value="backingBean.emailAddress"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
函数myFunc(){
警报(“您的电子邮件地址是:“+document.getElementById(“#{myInptTxtId.clientId}”).value”);
}
建议inputText
组件上的属性id
使用{myInptTxtId}
创建可通过EL访问的对象,
在上面的例子中。本文接着指出JSF2.0添加了
将零参数getClientId()
方法添加到UIComponent
类。
从而允许建议的#{myInptTxtId.clientId}
构造
以获取组件的实际生成id
虽然在我的测试中这不起作用。其他人能证实/否认吗。
下面建议的答案有一个缺点,即
技术不行。因此,如果知道上述技术
实际上是有效的。您需要准确地使用JSF在生成的HTML输出中分配的ID。右键单击webbrowser中的页面,然后选择“查看源”。这正是JS看到的HTML代码(您知道,JS在webbrowser中运行,并在HTMLDOM树上截取) 给予
<h:form>
<h:inputText id="emailAddresses" ... />
这样,表单将不会像j_id0
那样获得自动生成的ID,而输入字段将获得固定IDformId:emailAddress
。然后,您可以在JS中引用它
var input = document.getElementById('formId:emailAddress');
从那时起,您可以像往常一样继续使用JS代码。例如,通过input.value
获取值
另见:
更新根据您的更新:您误解了博客文章。特殊的
#{component}
引用引用了当前组件,在该组件中对EL表达式进行了求值,这只在组件本身的任何属性中起作用。您想要什么也可以通过以下方式实现:
var input = document.getElementById('#{emailAddress.clientId}');
使用(注意,绑定
到视图,您应该将其绑定到bean)
与
如果您使用的是jQuery,您甚至可以更进一步,使用样式类作为标记接口来抽象它们
<h:inputText styleClass="someMarkerClass" />
您需要准确地使用JSF在生成的HTML输出中分配的ID。右键单击webbrowser中的页面,然后选择“查看源”。这正是JS看到的HTML代码(您知道,JS在webbrowser中运行,并在HTMLDOM树上截取) 给予
<h:form>
<h:inputText id="emailAddresses" ... />
这样,表单将不会像j_id0
那样获得自动生成的ID,而输入字段将获得固定IDformId:emailAddress
。然后,您可以在JS中引用它
var input = document.getElementById('formId:emailAddress');
从那时起,您可以像往常一样继续使用JS代码。例如,通过input.value
获取值
另见:
更新根据您的更新:您误解了博客文章。特殊的
#{component}
引用引用了当前组件,在该组件中对EL表达式进行了求值,这只在组件本身的任何属性中起作用。您想要什么也可以通过以下方式实现:
var input = document.getElementById('#{emailAddress.clientId}');
使用(注意,绑定
到视图,您应该将其绑定到bean)
与
如果您使用的是jQuery,您甚至可以更进一步,使用样式类作为标记接口来抽象它们
<h:inputText styleClass="someMarkerClass" />
您可以在生成时查看HTML源代码,并查看id设置为什么,以便在JavaScript中使用它。因为它是在表单中,所以它可能是在表单id之前加上的。在生成HTML源代码时,您可以查看HTML源代码,并查看id设置为什么,因此您可以在JavaScript中使用它。因为它在表单中,所以可能是在表单id前面加上前缀。id是动态生成的,所以您应该为所有父元素定义名称,以避免类似j_id123的id 请注意,如果使用jQuery选择元素,则应在冒号前使用双斜杠:
jQuery("my-form-id\\:my-text-input-block\\:my-input-id")
而不是:
jQuery("my-form-id:my-text-input-block:my-input-id")
对于Richfaces,您可以在jsf页面上使用el表达式:
#{rich:element('native-jsf-input-id')}
要选择javascript元素,例如:
#{rich:element('native-jsf-input-id')}.value = "Enter something here";
Id是动态生成的,所以您应该为所有父元素定义名称,以避免类似j_id123的Id 请注意,如果使用jQuery选择元素,则应在冒号前使用双斜杠:
jQuery("my-form-id\\:my-text-input-block\\:my-input-id")
而不是:
jQuery("my-form-id:my-text-input-block:my-input-id")
对于Richfaces,您可以在jsf页面上使用el表达式:
#{rich:element('native-jsf-input-id')}
要选择javascript元素,例如:
#{rich:element('native-jsf-input-id')}.value = "Enter something here";
回答:所以这是我最喜欢的技术。不需要做太多奇怪的事情来找出组件的id。记住这一点,这样您就可以从页面上的任何位置了解组件的
id
,而不仅仅是从实际组件本身。这是关键。我按下一个按钮,启动javascript函数,它应该能够访问任何其他组件,而不仅仅是启动它的组件
此解决方案不需要任何“右键单击”即可查看id。这种类型的解决方案是脆弱的,因为id是动态生成的,如果我更改页面,我每次都要经历这些胡说八道
<h:inputText id="emailAddresses" class="emailAddressesForSelector"...
jQuery('.emailAddressesForSelector');
<h:form id="myform">
<h:inputText id="name" value="#{beanClass.name}"
a:placeholder="Enter Client Title"> </h:inputText>
</h:form>
var x = document.getElementById('myform:name').value; //here x will be of string type
var y= parseInt(x,10); //here we converted x into Integer type and can do the
//arithmetic operations as well