I am trying to use jQuery on a page build with JSF and RichFaces standard, but no matter how I set, it doesn't work. In the code below, if jQuery works, it should directly pop up a warning dialog with "Debugging" txt on it. But it never happens.
I have looked at some links, like How to enforce loading of jQuery in RichFaces?, How to use jQuery with JSF 2.0, Integrate JQuery with Richfaces, but even I declare same <h:outputScript name="jquery.js" target="head"/> in h:header, nothing happened.
Below is the full page, please help me to figure out, as jQuery is necessary for current task.
<?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>
Then I tested wether jQuery library is loaded Checking if jquery is loaded using Javascript, I edit my script part as below:
<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>
The effect is when page generated, the dialog show with "Yeah!", seems jQuery library already loaded ? But why original script part doesn't pop up dialog ?
<script type="text/javascript">
$(document).ready(function(){
alert("Debugging");
});
</script>
