无法将 jQuery 与 JSF RichFaces 一起使用？

Question

我试图在使用 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">&nbsp;</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">&nbsp;</td>
                    <td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason"></h:outputText></td>
                    <td style="width: 5px">&nbsp;</td>
                    <td align="left">
                        <h:inputTextarea style="width: 250px;height: 70px;" id="fbsRestrictRsn" value="#{fttbDetails.fbsRestrictRsn}">
                        </h:inputTextarea>
                    </td>

                    <td style="width: 5px">&nbsp;</td>
                    <td align="left" style="font-weight: bold;"><h:outputText value="FBS Restrict Reason History"></h:outputText></td>
                    <td style="width: 5px">&nbsp;</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">&nbsp;</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>

Answer 1

在参考了两个文档Difference between $(window).load() and $(document).ready() functions, window.onload vs $(document).ready()并用我的jQuery测试后，问题出在我应该选择$(window).load而不是$(document).ready，jQuery库在 JSF/RichFaces 页面上的 header 中声明时工作正常，弹出对话框将在更改为 $(window).load 后显示。

无法将 jQuery 与 JSF RichFaces 一起使用？

Cannot use jQuery with JSF RichFaces?

html

jquery

jsf

richfaces