Fatal编程技术网
  • javascript/
  • 如何知道JSF组件的id以便在Javascript中使用

如何知道JSF组件的id以便在Javascript中使用

javascript jsf

如何知道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，而输入字段将获得固定ID
formId: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前面加上前缀。

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是动态生成的，如果我更改页面，我每次都要经历这些胡说八道

  • 将组件绑定到支持bean

  • 在需要的任何位置引用绑定组件

    • 下面是一个如何做到这一点的示例

    假设：我有一个*.xhtml页面（可以是*.jsp），并且定义了一个支持bean。我也在使用JSF2.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"/>
    确保也为这个属性创建getter/setter。

    我知道这不是JSF的方式，但是如果您想避免ID问题，可以为选择器设置一个特殊的CSS类。只要确保使用一个好的名称，这样当有人读取类名时，就可以清楚地知道它是用于此目的的

    <h:inputText id="emailAddresses" class="emailAddressesForSelector"...
    当然，您仍然需要手动管理类名唯一性。
    我确实认为，只要您不在可重用组件中使用它，它是可维护的。在这种情况下，您可以使用约定生成类名。

    或者您可以设置，并且表单id不会在DOM元素前面加上前缀。@maple:您只需要小心使用重复的id。对于这样的简单形式，您确实可以这样做。但是对于视图中包含重复组件的复杂页面，您希望将其保留为默认值。可以说，我的主要目标是组件间通信。您的解决方案不允许单击按钮和启动javascript来访问页面中的任何其他组件。请参阅下面我的答案以获得更好的解决方案。为什么要将其绑定到支持bean？那只是杂乱无章。只需立即绑定到视图，就像我的答案更新的第一部分一样。@BalusC尽管我给我的p:commandButton提供了一个名为speak out的固定id，但它仍然自动生成一个名为id=“j_idt39:speakout”的id，将组件绑定到bean是完全不必要的，而且只会增加混乱 
    <h:form  id="myform">
 <h:inputText  id="name" value="#{beanClass.name}" 
                a:placeholder="Enter Client Title"> </h:inputText>
</h:form>

        jQuery("my-form-id:my-text-input-block:my-input-id")

        #{rich:element('native-jsf-input-id')} 

        #{rich:element('native-jsf-input-id')}.value = "Enter something here";

    <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"/>

    UIInput emailAddyInputText;

    <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