Can't execute Javascript in jsf page - Stack Overflow

IT技术

更新时间：2025-02-042

admin管理员组
文章数量:1205154

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>

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>

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:

更多相关文章