Can't execute Javascript in jsf page

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" ".dtd">
<html xmlns=""
  xmlns:h=""
  xmlns:ui=""
  xmlns:f="">
<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>

<?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>

Share Improve this question edited Jul 1, 2012 at 5:34 BalusC 1.1m376 gold badges3.6k silver badges3.6k bronze badges asked Jul 1, 2012 at 3:42 Bernad Ali 1,7296 gold badges23 silver badges29 bronze badges

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. – BalusC Commented Jul 1, 2012 at 5:16
sorry for the inconvenience caused.i have deleted the unnecessary part.please refer to the updated version.thanks – Bernad Ali Commented Jul 1, 2012 at 5:23

Add a comment |

2 Answers 2

Sorted by: Reset to default 20

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Can't execute Javascript in jsf page - Stack Overflow

2 Answers 2

See also:

与本文相关的文章

评论列表(0)