无法将 jQuery 与 JSF RichFaces 一起使用?
Cannot use jQuery with JSF RichFaces?
我试图在使用 JSF 和 RichFaces 标准构建的页面上使用 jQuery,但无论我如何设置,它都不起作用。在下面的代码中,如果jQuery有效,应该会直接弹出警告对话框,上面写着"Debugging" txt。但它永远不会发生。
我查看了一些链接,例如 How to enforce loading of jQuery in RichFaces?, How to use jQuery with JSF 2.0, Integrate JQuery with Richfaces,但即使我在 h:header
中声明了相同的 <h:outputScript name="jquery.js" target="head"/>
,也没有任何反应。
下面是完整页面,请帮我弄清楚,因为当前任务需要jQuery。
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>fttbDetails</title>
<h:outputScript name="jquery.js" target="head"/>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<h:outputStylesheet name="PED.css" library="css"></h:outputStylesheet>
</h:head>
<f:event type="preRenderView" listener="#{fttbDetails.getFttbDetails}" />
<h:body>
<ui:include src="header.xhtml"></ui:include>
<f:view>
<h:form name ="fttbDetails" id ="fttbDetails">
<table width = "100%">
<tr>
<td >
<table width="100%" style="font-size: 11pt;font: normal">
<tbody>
<tr style="height: 30px">
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Ind"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:selectOneMenu id="fbsRestrictInd" value="#{fttbDetails.fbsRestrictInd}">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu>
</td>
<td style="width: 5px"> </td>
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:inputTextarea style="width: 250px;height: 70px;" id="fbsRestrictRsn" value="#{fttbDetails.fbsRestrictRsn}">
</h:inputTextarea>
</td>
<td style="width: 5px"> </td>
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason History"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:inputTextarea style="width: 250px;height: 70px;" id="fbsRestrictRsnHistory" value="#{fttbDetails.fbsRestrictRsnHistory}" readonly="#{facesContext.renderResponse}">
</h:inputTextarea>
</td>
</tr>
<tr style="height: 100px" >
<td colspan="3">
<rich:dataTable value="#{sessionScope.EquipList}" var="equip" columnClasses="column1"
style="height:38px; width:95%;" rendered="#{not empty sessionScope.EquipList}" >
<rich:column style="text-align:center;width:100px;">
<f:facet name="header">
<h:outputText value="Equipment"/>
</f:facet>
<h:outputText value="#{equip.equipClli}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Type"/>
</f:facet>
<h:outputText value="#{equip.equipType}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="SDN Ind"/>
</f:facet>
<h:outputText value="#{equip.sdnPortAvailability}"/>
</rich:column>
</rich:dataTable>
<h:outputText value="#{sessionScope.EquipMessage}" rendered="#{empty sessionScope.EquipList}" style="font-size:normal;color:blue;font-weight: bold"></h:outputText>
</td>
</tr>
<tr style="height: 50px">
<td align="right" colspan="7">
<h:commandButton value="Update" style="height:22px" id="update"
onclick="if (! confirm('Do you want to update FTTB details?')) return false" action="#{fttbDetails.updateFttb}">
</h:commandButton>
</td>
<td style="width: 5px"> </td>
<td>
<h:commandButton value="Back" style="height:22px;align:right" action="CplSearch.xhtml"></h:commandButton>
</td>
</tr>
</tbody>
</table>
</td>
</tr></table></h:form></f:view>
<script type="text/javascript">
$(document).ready(function(){
alert("Debugging");
});
</script>
</h:body>
然后我测试了 jQuery 库是否加载 Checking if jquery is loaded using Javascript,我编辑我的脚本部分如下:
<script type="text/javascript">
//$(document).ready(function(){
// alert("Debugging");
//});
window.onload = function() {
if(window.jQuery){
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
效果是页面生成时,对话框显示"Yeah!",好像jQuery库已经加载了?但是为什么原脚本部分不弹出对话框?
<script type="text/javascript">
$(document).ready(function(){
alert("Debugging");
});
</script>
在参考了两个文档Difference between $(window).load() and $(document).ready() functions, window.onload vs $(document).ready()并用我的jQuery测试后,问题出在我应该选择$(window).load
而不是$(document).ready
,jQuery库在 JSF/RichFaces
页面上的 header 中声明时工作正常,弹出对话框将在更改为 $(window).load
后显示。
我试图在使用 JSF 和 RichFaces 标准构建的页面上使用 jQuery,但无论我如何设置,它都不起作用。在下面的代码中,如果jQuery有效,应该会直接弹出警告对话框,上面写着"Debugging" txt。但它永远不会发生。
我查看了一些链接,例如 How to enforce loading of jQuery in RichFaces?, How to use jQuery with JSF 2.0, Integrate JQuery with Richfaces,但即使我在 h:header
中声明了相同的 <h:outputScript name="jquery.js" target="head"/>
,也没有任何反应。
下面是完整页面,请帮我弄清楚,因为当前任务需要jQuery。
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title>fttbDetails</title>
<h:outputScript name="jquery.js" target="head"/>
<meta http-equiv="Content-Type"
content="application/xhtml+xml; charset=UTF-8" />
<h:outputStylesheet name="PED.css" library="css"></h:outputStylesheet>
</h:head>
<f:event type="preRenderView" listener="#{fttbDetails.getFttbDetails}" />
<h:body>
<ui:include src="header.xhtml"></ui:include>
<f:view>
<h:form name ="fttbDetails" id ="fttbDetails">
<table width = "100%">
<tr>
<td >
<table width="100%" style="font-size: 11pt;font: normal">
<tbody>
<tr style="height: 30px">
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Ind"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:selectOneMenu id="fbsRestrictInd" value="#{fttbDetails.fbsRestrictInd}">
<f:selectItem itemValue="Y" itemLabel="YES" />
<f:selectItem itemValue="N" itemLabel="NO" />
</h:selectOneMenu>
</td>
<td style="width: 5px"> </td>
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:inputTextarea style="width: 250px;height: 70px;" id="fbsRestrictRsn" value="#{fttbDetails.fbsRestrictRsn}">
</h:inputTextarea>
</td>
<td style="width: 5px"> </td>
<td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason History"></h:outputText></td>
<td style="width: 5px"> </td>
<td align="left">
<h:inputTextarea style="width: 250px;height: 70px;" id="fbsRestrictRsnHistory" value="#{fttbDetails.fbsRestrictRsnHistory}" readonly="#{facesContext.renderResponse}">
</h:inputTextarea>
</td>
</tr>
<tr style="height: 100px" >
<td colspan="3">
<rich:dataTable value="#{sessionScope.EquipList}" var="equip" columnClasses="column1"
style="height:38px; width:95%;" rendered="#{not empty sessionScope.EquipList}" >
<rich:column style="text-align:center;width:100px;">
<f:facet name="header">
<h:outputText value="Equipment"/>
</f:facet>
<h:outputText value="#{equip.equipClli}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Type"/>
</f:facet>
<h:outputText value="#{equip.equipType}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="SDN Ind"/>
</f:facet>
<h:outputText value="#{equip.sdnPortAvailability}"/>
</rich:column>
</rich:dataTable>
<h:outputText value="#{sessionScope.EquipMessage}" rendered="#{empty sessionScope.EquipList}" style="font-size:normal;color:blue;font-weight: bold"></h:outputText>
</td>
</tr>
<tr style="height: 50px">
<td align="right" colspan="7">
<h:commandButton value="Update" style="height:22px" id="update"
onclick="if (! confirm('Do you want to update FTTB details?')) return false" action="#{fttbDetails.updateFttb}">
</h:commandButton>
</td>
<td style="width: 5px"> </td>
<td>
<h:commandButton value="Back" style="height:22px;align:right" action="CplSearch.xhtml"></h:commandButton>
</td>
</tr>
</tbody>
</table>
</td>
</tr></table></h:form></f:view>
<script type="text/javascript">
$(document).ready(function(){
alert("Debugging");
});
</script>
</h:body>
然后我测试了 jQuery 库是否加载 Checking if jquery is loaded using Javascript,我编辑我的脚本部分如下:
<script type="text/javascript">
//$(document).ready(function(){
// alert("Debugging");
//});
window.onload = function() {
if(window.jQuery){
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
效果是页面生成时,对话框显示"Yeah!",好像jQuery库已经加载了?但是为什么原脚本部分不弹出对话框?
<script type="text/javascript">
$(document).ready(function(){
alert("Debugging");
});
</script>
在参考了两个文档Difference between $(window).load() and $(document).ready() functions, window.onload vs $(document).ready()并用我的jQuery测试后,问题出在我应该选择$(window).load
而不是$(document).ready
,jQuery库在 JSF/RichFaces
页面上的 header 中声明时工作正常,弹出对话框将在更改为 $(window).load
后显示。