使用Javascript获取JSF定义的组件 [英] Getting JSF-defined component with Javascript

问题描述

我正在使用JSF创建一个接口，如果第二个尚未设置，我希望一个文本字段的值提供默认值。关键代码看起来像这样：

I'm creating an interface using JSF, and I'd like the value of one text field to provide the default for a second if the second hasn't yet been set. The crucial code will look something like this:

<h:outputScript>
function suggestValue2() {
    var value2 = document.getElementById('value2').value;
    if (value2 == "") {
        document.getElementById('value2').value = document.getElementById('value1').value;
    }
}
</h:outputScript>

<h:inputText
    id="value1"
    onblur="suggestValue2();" />

<h:inputText
    id="value2" />

问题是这实际上不起作用。这两个输入元素的实际ID以一些JSF生成的值为前缀，这些值可以调用 getElementById 调用。对我来说，完成我想要完成的目标的最佳途径是什么？

---

编辑：我应该注意，这将出现在复合组件中，这可能会在单个页面上出现多次。 JSF动态设置实际ID表示所需的行为。

The problem is this doesn't actually work. The actual IDs of those two input elements get prefixed with some JSF-generated values, which tanks the getElementById calls. What's the best way for me to accomplish what I'm trying to accomplish here?

---

I should note that this is going to appear inside a composite component, which could wind up appearing multiple times on a single page. JSF dynamically setting the actual ID represents desired behavior.

推荐答案

将组件绑定到视图，

<h:inputText binding="#{input1}" ... />

以便您可以通过 UIComponent＃getClientId（） 。

so that you can just print its client ID elsewhere in the view by UIComponent#getClientId().

<h:outputScript>
    var input1 = document.getElementById('#{input1.clientId}');
    // ...
</h:outputScript>

---

如你所说，你在复合材料里面组件，可能很高兴知道复合组件自己的客户端ID已经可以通过＃{cc.clientId} 获得。所以更推荐的替代方案是：

---

As you mentioned that you're inside a composite component, it may be good to know that composite component's own client ID is already available via #{cc.clientId}. So the more recommended alternative would be:

<cc:implementation>
    <h:outputScript>
        var input1 = document.getElementById('#{cc.clientId}:input1');
        // ...
    </h:outputScript>
    ...
    <h:inputText id="input1" ... />
    ...
</cc:implementation>

参见：

• 在JSF复合组件中集成JavaScript，干净利落的方式



See also:

• Integrate JavaScript in JSF composite component, the clean way

这篇关于使用Javascript获取JSF定义的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！