2 Replies Latest reply on Oct 19, 2007 4:22 PM by Arbi Sookazian

    document.getElementById() problem with JSF/Seam

    Arbi Sookazian Master

      I noticed that a Javascript function I have inside a xhtml page could not reference/find the <h:inputHidden> field by ID unless it was not embedded inside a dataTable.

      I need to use that function to get the value of a inputHidden field inside a dataTable. Any rules about this?

      The function seems pretty simple. document.getElementById("elementID").

      If the inputHidden was inside <h:form> then the function call works like this:

      document.getElementById("formID: elementID")

        • 1. Re: document.getElementById() problem with JSF/Seam
          Stuart Douglas Master

          try:
          document.getElementById("formID:dataTableId:rowNumber:elementID")

          • 2. Re: document.getElementById() problem with JSF/Seam
            Arbi Sookazian Master

            thx for the reply. It seems you're right based on the view source (HTML rendered) in IE:

            <input id="mainForm:hotels:3:hideme1" type="hidden" name="mainForm:hotels:3:hideme1" /><span id="mainForm:hotels:3:bigout">bigout</span>


            I don't know why the hidden field's value ("hideme") is not showing above. val1 is blank and val2 is undefined in the javascript function when I run the app. I modified the main.xhtml from the seam booking example as a test below:

            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:a="http://richfaces.org/a4j"
             xmlns:ft="http://sourceforge.net/projects/facestrace"
             template="template.xhtml">
            
            <!-- content -->
            <ui:define name="content">
            
             <script type="text/javascript">
            
             function getInputHidden(obj, id, rowIndex) {
             alert('id = ' + id);
             alert('rowIndex = ' + rowIndex);
             val1 = document.getElementById("mainForm:hotels:1:hideme1");
             alert('val1 = ' + val1.value);
             val2 = document.getElementById("mainForm:hotels:1:bigout");
             alert('val2 = ' + val2.value);
             }
            
             </script>
            
             <span class="errors">
             <h:messages globalOnly="true"/>
             </span>
            
            
            
             <h:form id="mainForm">
             <h:outputText value="No Hotels Found" rendered="#{hotels != null and hotels.rowCount==0}"/>
             <h:dataTable id="hotels" value="#{hotels}" var="hot" rendered="#{hotels.rowCount>0}">
            
             <h:column>
             <f:facet name="header">Name</f:facet>
             #{hot.name}
             <h:inputHidden id="hideme1" value="hideme"/>
             <h:outputText id="bigout" value="bigout"/>
             </h:column>
             <h:column>
             <f:facet name="header">Address</f:facet>
             #{hot.address}
             </h:column>
             <h:column>
             <f:facet name="header">City, State</f:facet>
             #{hot.city}, #{hot.state}, #{hot.country}
             </h:column>
             <h:column>
             <f:facet name="header">Zip</f:facet>
             #{hot.zip}
             </h:column>
             <h:column>
             <f:facet name="header">Action</f:facet>
             <s:link id="viewHotel" value="View Hotel" onclick="getInputHidden(this, 'hideme1', #{hotels.getRowIndex()})" action="#{hotelBooking.selectHotel(hot)}"/>
             </h:column>
             </h:dataTable>
             <s:link value="More results" action="#{hotelSearch.nextPage}" rendered="#{hotelSearch.nextPageAvailable}"/>
             </h:form>
            
            </ui:define>
            
            </ui:composition>