如何知道 JSF 组件的 id 以便我可以在 Javascript 中使用 [英] How can I know the id of a JSF component so I can use in Javascript
问题描述
问题: 有时您想从 javascript 访问组件getElementById，但 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 组件上的属性id使用 #{myInptTxtId} 创建一个可以通过 EL 访问的对象，在上面的例子中.文章继续指出 JSF 2.0 添加了UIComponent 类的零参数 getClientId() 方法.从而允许 #{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 页面
<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屋！
