我怎么知道JSF组件的id，所以我可以在Javascript中使用 [英] How can I know the id of a JSF component so I can use in Javascript
问题描述
问题：有时您会想要使用
getElementById 从javascript访问组件，但是ID是在JSF中动态生成的，所以你
需要一种获取对象id的方法。我在下面回答你如何做到这一点。
Problem: Sometimes you will want to access a component from javascript with
getElementById, but id's are generated dynamically in JSF, so you
need a method of getting an objects id. I answer below on how you can do this.
原始问题：
我想使用下面的代码。如何在我的Javascript中引用inputText JSF组件？
Original Question: I want to use some code like below. How can I reference the inputText JSF component in my Javascript?
<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>
更新：这个发布 JSF2.0中的客户端标识符讨论使用如下技术：
Update: this post Client Identifiers in JSF2.0 discusses using a technique like:
<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"/>
建议< inputText component
使用＃{myInptTxtId} ，
创建一个可以使用EL访问的对象在上面的例子中。文章继续说明JSF 2.0将
的零参数 getClientId（）方法添加到 UIComponent 上课。
从而允许＃{myInptTxtId.clientId} 构造建议上面的
来获得组件的实际生成id。
Suggesting that the attribute id on the inputText component
creates an object that can be accessed with EL using #{myInptTxtId},
in the above example. The article goes on to state that JSF 2.0 adds
the zero-argument getClientId() method to the UIComponent class.
Thereby allowing the #{myInptTxtId.clientId} construct suggested
above to get the actual generated id of the component.
虽然在我的测试中这不起作用。任何人都可以确认/否认。
下面建议的答案有缺点，即上面的
技术没有。所以最好知道上面的技术
是否真的有用。
Though in my tests this doesn't work. Can anyone else confirm/deny. The answers suggested below suffer from drawback that the above technique doesn't. So it would be good to know if the above technique actually works.
推荐答案
答案：所以这是我最开心的技巧。不需要做太多非常奇怪的东西来弄清楚组件的id。请记住，重要的是，您可以从页面上的任何位置知道组件的 id ，而不是实际组件本身的 。这是关键。我按下按钮，启动javascript功能，它应该能够访问任何其他组件，而不仅仅是启动它的组件。
Answer: So this is the technique I'm happiest with. Doesn't require doing too much weird stuff to figure out the id of a component. Remember the whole point of this is so you can know the id of a component from anywhere on your page, not just from the actual component itself. This is key. I press a button, launch javascript function, and it should be able to access any other component, not just the one that launched it.
此解决方案不需要任何右键单击，并查看id是什么。这种类型的解决方案很脆弱，因为id是动态生成的，如果我改变页面，我每次都要经历这种废话。
This solution doesn't require any 'right-click' and see what the id is. That type of solution is brittle, as the id is dynamically generated and if I change the page I'll have to go through that nonsense each time.
-
将组件绑定到辅助bean。
Bind the component to a backing bean.
在任何位置引用绑定组件。
Reference the bound component wherever you want.
所以这里有一个如何做的样本。
So here is a sample of how that can be done.
假设：我有一个* .xhtml页面（可能是* .jsp），我已经定义了一个支持bean。我也在使用JSF 2.0。
Assumptions: I have an *.xhtml page (could be *.jsp) and I have defined a backing bean. I'm also using JSF 2.0.
*。xhtml page
*.xhtml page
<script>
function myFunc() {
var inputText = document.getElementById("#{backBean.emailAddyInputText.clientId}")
alert("The email address is: " + inputText.value );
}
</script>
<h:inputText binding="#{backBean.emailAddyInputText}"/>
<h:commandButton onclick="myFunc()" action="results" value="Next"/>
BackBean.java
BackBean.java
UIInput emailAddyInputText;
确保为此属性创建getter / setter。
Make sure to create your getter/setter for this property too.
这篇关于我怎么知道JSF组件的id，所以我可以在Javascript中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
