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


          • 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"
            <!-- 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);
             <span class="errors">
             <h:messages globalOnly="true"/>
             <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}">
             <f:facet name="header">Name</f:facet>
             <h:inputHidden id="hideme1" value="hideme"/>
             <h:outputText id="bigout" value="bigout"/>
             <f:facet name="header">Address</f:facet>
             <f:facet name="header">City, State</f:facet>
             #{hot.city}, #{hot.state}, #{hot.country}
             <f:facet name="header">Zip</f:facet>
             <f:facet name="header">Action</f:facet>
             <s:link id="viewHotel" value="View Hotel" onclick="getInputHidden(this, 'hideme1', #{hotels.getRowIndex()})" action="#{hotelBooking.selectHotel(hot)}"/>
             <s:link value="More results" action="#{hotelSearch.nextPage}" rendered="#{hotelSearch.nextPageAvailable}"/>