Can't execute Javascript in jsf page

javascript jsf facelets

27,107

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.

Bernad Ali

Updated on July 09, 2022

Comments

Bernad Ali almost 2 years

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>