Can't execute Javascript in jsf page

Asked 1/7, 2012 at 3:42 Answered 25/3, 2015 at 9:4

I'm new to jsf. I have been trying to do a simple Javascript function with commandbutton. I tried many times but wasn't even able to do an alert message. This is part of my code. Please can anyone guide me, and tell what is wrong, and what I should do to make it run?

<?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"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core">
<h:head>
  <script type="text/javascript">
  function test(){
    alert('test');
    alert(document.getElementById('frmDashBoard:testbt').value);
  }
  </script>
</h:head>
<h:body>
  <ui:composition template="../../template/commonLayout.xhtml"> 
    <ui:define name="content">
      <div>
        <h:form id="frmdashboard">
          <div name="form_panel" style="width: 984px">
               <h:commandButton id="testbt" value="#{message.btn_dashboard_search}" action="#{searchBLAction.doAction}" onclick="test()" />
          </div>
        </h:form>
      </div>
    </ui:define>
  </ui:composition>     
</h:body> 
</html>

Intersexual answered 1/7, 2012 at 3:42 Comment(2)

Are all those includes, tables, breaks, headers, styles absolutely necessary in order to reproduce the concrete problem? No? Please omit them from the code snippet. It only adds noise to the question which makes it harder for experts to "spot" the problem by just looking at the code. For this and future questions, try creating the smallest possible standalone test code snippet which one could basically just copy'n'paste'n'run to see the concrete problem. – Hippy 1/7, 2012 at 5:16

sorry for the inconvenience caused.i have deleted the unnecessary part.please refer to the updated version.thanks – Intersexual 1/7, 2012 at 5:23

Apart from this lowercase/uppercase typo (which wouldn't cause the function not being called at all, by the way), your concrete problem is caused because this page is been designed as a template client using <ui:composition>. Any content outside the <ui:composition> tag is ignored during runtime by Facelets. This content is only useful for visual web designers, but once it's compiled and executed during runtime, it's ignored altogether. Instead the composition's content will be inserted in the master template, the commonLayout in your case.

You need to put the <script> element inside an <ui:define> instead, this way it will be taken into the final Facelets composition.

<ui:define name="...">
    <script>
        ...
    </script>
    ...
</ui:define>

Or, better, put the JS function in its own JS file in the /resources folder and reference it as follows:

<ui:define name="...">
    <h:outputScript name="some.js" target="head" />
    ...
</ui:define>

Thanks to the target="head", it'll automatically be relocated into the HTML <head> during building the view.

See also:

Recommended topics

Hot tags