#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    9
    Rep Power
    0

    XHTML + Javascript


    I trying to use the getElementById, but always return null. Why?

    Code:
    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html">
        <h:head>
            <title>Login Web</title>
        </h:head>
        <h:body onload="test()">
          <h:form id="formLogin">
            <h1><h:outputText id="welcome" value="Welcome."/></h1>
            <h:panelGrid id="gridLoginKey" columns="2">
              <h:outputText id="loginLabel" value="Login:"/>
              <h:inputText id="user" value="#{userMB.user.name}" 
          			required="true" requiredMessage="NEED"
          			maxlength="50"/>
     
              <h:outputText id="keyLabel" value="Key:"/>
              <h:inputSecret id="key" value="#{userMB.user.key}"
              		required="true" requiredMessage="NEED"
              		maxlength="10"/>
            </h:panelGrid>
            <h:commandButton id="bt" value="Enter" action="#{userMB.login()}" />
          </h:form>
          <script language="javascript">
          	function test(){
              	if(document.getElementById('bt') != null)
              		alert('NOT NULL');
              	else
                  	        alert('NULL'); 
        	}	
          </script>
        </h:body>
    </html>
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
    What's the outputted HTML after all that's interpreted?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    9
    Rep Power
    0
    Originally Posted by requinix
    What's the outputted HTML after all that's interpreted?
    The output is always null
  6. #4
  7. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
    That's the return value from getElementById. I asked for the outputted HTML. Because what you have there is the source for some Java "tag library" thing, not the final HTML.

    Need to see that final HTML.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    9
    Rep Power
    0
    Originally Posted by requinix
    That's the return value from getElementById. I asked for the outputted HTML. Because what you have there is the source for some Java "tag library" thing, not the final HTML.

    Need to see that final HTML.
    Thank you. In final HTML the id is formLogin:bt
    I just do not know why after compiled changed the id.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    9
    Rep Power
    0
    I would like to get the return value of the function userMB.login() in action button.

    Code:
    <h:commandButton id="bt" value="Entrar" action="#{userMB.login()}" />
          </h:form>
          <script language="javascript">
          	function test(){
    	        alert(document.getElementById('formLogin:bt').action);
        	}	
          </script>
    The output is undefined
    My function userMB.login() return true or false
  12. #7
  13. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,053
    Rep Power
    9398
  14. #8
  15. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Location
    Pennsylvania, USA
    Posts
    35
    Rep Power
    2
    OK. I solved your problem.

    I now get "NOT NULL" in Firefox and Internet Explorer. Basically, I saw that the onload method was not being called, so I changed <h:body> to just <body>:

    Code:
        <body onload="test()">
    and the end tag to:

    Code:
       </body>
    Also, I moved your JavaScript code to the top of the document and placed it in a proper head tag there:

    Code:
    <h:head>
    <title>Login Web</title>
          <script language="javascript">
          	function test(){
              	if(document.getElementById('bt') != null)
              		alert('NOT NULL');
              	else
                  	alert('NULL');
        	}
          </script>
    <h:/head>
    Regards - Shawn - robowhiz.info
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    9
    Rep Power
    0
    Originally Posted by dynamicflash
    OK. I solved your problem.

    I now get "NOT NULL" in Firefox and Internet Explorer. Basically, I saw that the onload method was not being called, so I changed <h:body> to just <body>:

    Code:
        <body onload="test()">
    and the end tag to:

    Code:
       </body>
    Also, I moved your JavaScript code to the top of the document and placed it in a proper head tag there:

    Code:
    <h:head>
    <title>Login Web</title>
          <script language="javascript">
          	function test(){
              	if(document.getElementById('bt') != null)
              		alert('NOT NULL');
              	else
                  	alert('NULL');
        	}
          </script>
    <h:/head>
    Regards - Shawn - robowhiz.info
    I had already solved this problem:
    Code:
    document.getElementById('formLogin:bt')
    My problem is that I like get the return of function in action of 'bt'.
    I did:
    Code:
    <h:commandButton id="bt" value="Enter" action="#{userMB.login()}" />
          </h:form>
          <script language="javascript">
          	function test(){
    	        alert(document.getElementById('formLogin:bt').action);
        	}	
          </script>
    The alert output is undefined. The method userMB.login() return true or false.

    outputted HTML:
    Code:
    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
            <title>Login Web</title></head><body onload="teste()">
    <form id="formLogin" name="formLogin" method="post" action="/Test/login.jsf" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="formLogin" value="formLogin" />
    
            <h1><span id="formLogin:bemVindo">Welcome.</span></h1><table id="formLogin:gridLoginKey">
    <tbody>
    <tr>
    <td><span id="formLogin:loginLabel">Login:</span></td>
    <td><input id="formLogin:user" type="text" name="formLogin:user" maxlength="50" /></td>
    </tr>
    <tr>
    <td><span id="formLogin:keyLabel">Senha:</span></td>
    <td><input id="formLogin:key" type="password" name="formLogin:key" value="" maxlength="10" /></td>
    </tr>
    </tbody>
    </table>
    <input id="formLogin:bt" type="submit" name="formLogin:bt" value="Entrar" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="2344269899465707396:2010096860559179814" autocomplete="off" />
    </form>
          <script language="javascript">
          	function test(){
              	if(document.getElementById('formLogin:bt') != null)
              		alert(document.getElementById('formLogin:bt').action); 
        	}	
          </script></body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo