无法在 jsf 页面中执行 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11279383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can't execute Javascript in jsf page
提问by Bernad Ali
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?
我是 jsf 的新手。我一直在尝试用命令按钮做一个简单的 Javascript 功能。我尝试了很多次，但甚至无法发出警报消息。这是我的代码的一部分。请任何人都可以指导我，告诉我出了什么问题，我应该怎么做才能让它运行？
<?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>
回答by BalusC
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 ignoredduring 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 commonLayoutin your case.
除了这个小写/大写拼写错误（顺便说一下，这不会导致函数根本不被调用），你的具体问题是因为这个页面被设计为使用<ui:composition>. 在运行期间，Facelets<ui:composition>会忽略标记外的任何内容。此内容仅对可视化 Web 设计人员有用，但一旦在运行时编译和执行，它就会被完全忽略。相反，合成的内容将插入到主模板中，commonLayout在您的情况下。
You need to put the <script>element inside an <ui:define>instead, this way it will be taken into the final Facelets composition.
您需要将<script>元素放在 an 中<ui:define>，这样它将被纳入最终的 Facelets 组合。
<ui:define name="...">
<script>
...
</script>
...
</ui:define>
Or, better, put the JS function in its own JS file in the /resourcesfolder and reference it as follows:
或者，更好的是，将JS函数放在文件/resources夹中自己的JS文件中，引用如下：
<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.
多亏了target="head"，它会<head>在构建视图期间自动重新定位到 HTML中。
See also:
也可以看看：
回答by priya
Any thing defined outside ui:composition is ignored.So place your content inside this tag and it will work: Something like this:
任何在 ui:composition 之外定义的东西都会被忽略。所以把你的内容放在这个标签里，它就会起作用：像这样：
<ui:composition template="/WEB-INF/tags/layout.xhtml">
<ui:include src="/tags/common.xhtml"></ui:include>
<ui:define name="content">
<h:outputScript name="validation.js" library="javascript"></h:outputScript>
