scrollableDataTable trashes application once displayed one t
This is the weirdest thing I have seen so far in RichFaces. I have a couple of pages in my application that display a scrollableDataTable. No problem there. BUT, once I go to one of those pages, and then go to another page (any page) in the application that contains an input text field and I begin typing in that text field, I get a javascript error that says "Object required" and if I use the script debugger to see what line of javascript code is having a problem, it is this line of the a4j_3_1_4.GAorg/richfaces/renderkit/html/scripts/scrollable-data-table.js.jsf script file.
this.firstIndex=Number($(this.prefix+":n").rows[0].id.split(this.prefix)[1].split(":")[2]);;
Yes, that's right, THE SCROLLABLE DATA TABLE SCRIPT, which is no longer present in the browser because it is not even being loaded on the page currently displayed with the text field.
Can someone please explain this? I am using scrollableDataTable on three pages currently, and I REALLY REALLY need to be able to use it, but not if it is going to trash the entire application.
I am using:
facelets 1.1.12
RichFaces 3.1.4GA
JSF 1.2 Sun implementation
Below is the facelet code for one of my scrollableDataTable pages:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:u="http:/jsf.exadel.com/template/util">
<h:form id="admintechtasksform">
<rich:panel id="dopadmintechprocpanel" style="width: 96%; height: 500px;">
<f:facet name="header">Diagnostic Processing Tasks For #{IntakeOffenderBean.offenderName} (#{IntakeOffenderBean.offenderID})</f:facet>
<rich:spacer height="12px"></rich:spacer>
<center>
<a4j:commandButton styleClass="stdLabel" value="Go Back" reRender="maincontent">
<a4j:actionparam name="selectedURL" value="/dopintakeadmintechprocess.xhtml" assignTo="#{IntakeMenuBean.selectedURL}"/>
<a4j:actionparam name="refresh" value="true" assignTo="#{IntakeMenuBean.refresh}"/>
</a4j:commandButton>
</center>
<rich:spacer height="12px"></rich:spacer>
<style type="text/css">
.dr-sdt {
float: none;
position:relative;
margin-left: 12px;
}
</style>
<rich:scrollableDataTable ajaxRendered="true"
width="96%" height="416px" id="offenderTaskList" value="#{IntakeOffenderBean.adminTechDiagnosticChecklistTasks}" var="TaskBean">
<rich:column id="complete" width="65px">
<f:facet name="header"><h:outputText value="Completed" styleClass="stdLabelLight" /></f:facet>
<rich:spacer width="12px"></rich:spacer>
<h:graphicImage value="/images/passed.gif" rendered="#{TaskBean.isTaskComplete}"/>
<h:graphicImage value="/images/failed.gif" rendered="#{!TaskBean.isTaskComplete}"/>
</rich:column>
<rich:column id="taskName" width="170px">
<f:facet name="header"><h:outputText value="Task Description" styleClass="stdLabelLight" /></f:facet>
<a4j:commandLink status="majorstatus" limitToList="true" actionListener="#{DOPIntakeAdminTechProcessBean.selectOffenderChecklistTask}" reRender="confirm" rendered="#{TaskBean.isTaskChecklistConfirm}" oncomplete="${TaskBean.taskURL}" styleClass="linkText" value="#{TaskBean.taskName}">
<a4j:actionparam name="reRender" value="offenderList" assignTo="#{IntakeMenuBean.reRender}"/>
</a4j:commandLink>
<h:outputText value="#{TaskBean.taskName}" rendered="#{!TaskBean.isTaskChecklistConfirm}"/>
</rich:column>
<rich:column id="intakeDate" width="65px">
<f:facet name="header"><h:outputText value="Due Date" styleClass="stdLabelLight"/></f:facet>
<h:outputText value="#{TaskBean.intakeDate}"><f:convertDateTime pattern="MM/dd/yyyy" /></h:outputText>
</rich:column>
<rich:column id="confirmDate" width="92px">
<f:facet name="header"><h:outputText value="Completed Date" styleClass="stdLabelLight"/></f:facet>
<h:outputText value="#{TaskBean.confirmDate}" converter="stupidopusdateblank"></h:outputText>
</rich:column>
<rich:column id="confirmStaff" width="200px">
<f:facet name="header"><h:outputText value="Staff" styleClass="stdLabelLight"/></f:facet>
<h:outputText value="#{ShallowEmployeeBean.getEmployeeName$[TaskBean.confirmStaff]}" rendered="#{TaskBean.isTaskComplete}"/>
</rich:column>
</rich:scrollableDataTable>
</rich:panel>
</h:form>
<rich:modalPanel id="task" minHeight="315" minWidth="450" height="315" width="500" zindex="2000">
<f:facet name="header">
<h:outputText value="Complete Task" />
</f:facet>
<f:facet name="controls">
<h:graphicImage value="/images/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('task')" />
</f:facet>
<a4j:include id="taskconfirm" viewId="\taskconfirm.xhtml"/>
</rich:modalPanel>
<script>
function getRightTop(ref) {
var position = new Object();
position.top = 0;
position.left = 0;
return position;
}
</script>
</ui:composition>
And code for one of my pages which has an input text field (the calendar date field) producing this problem:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:u="http:/jsf.exadel.com/template/util">
<a4j:form id="mpform">
<a4j:outputPanel ajaxRendered="true" id="confirm">
<table width="100%" align="center">
<tr>
<td colspan="2" class="stdLabel" align="center">
<h:outputText value="Mark #{IntakeConfirmTaskBean.selectedTask.taskName} Complete For #{IntakeOffenderBean.offenderName} (#{IntakeOffenderBean.offenderID})" styleClass="stdLabel" />
</td>
</tr>
<tr>
<td align="right">
<h:outputLabel styleClass="stdLabel" for="diagEmpCombo" value="Task Completed By: " />
</td>
<td align="left">
<h:selectOneMenu label="Task Completed By" id="diagEmpCombo" required="true" value="#{IntakeConfirmTaskBean.selectedTask.confirmStaff}">
<f:selectItems value="#{ShallowEmployeeBean.getDiagnosticEmployees$2[StaffBean.facilityID][true]}"/>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td align="right">
<h:outputText value="Date Task Completed" styleClass="stdLabel" />
</td>
<td align="left">
<rich:calendar label="Date Task Completed" mode="client" enableManualInput="true" id="confirmDate" datePattern="MM/dd/yyyy" required="true" value="#{IntakeConfirmTaskBean.selectedTask.confirmDateNotNull}"/>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a4j:commandButton status="majorstatus" value="Save" limitToList="true" actionListener="#{IntakeConfirmTaskBean.completeTask}" oncomplete="windowclose();" reRender="taskerrors,#{IntakeMenuBean.reRender}">
<a4j:actionparam name="refresh" value="true" assignTo="#{IntakeMenuBean.refresh}"/>
</a4j:commandButton>
</td>
</tr>
<tr>
<td colspan="2">
<a4j:outputPanel id="taskerrors">
<h:inputHidden id="maximumSeverity" rendered="#{! empty facesContext.maximumSeverity}" value="#{facesContext.maximumSeverity.ordinal}" />
<rich:messages id="error" layout="list" styleClass="stdLabel">
<f:facet name="errorMarker">
<h:graphicImage value="/images/failed.gif" />
</f:facet>
</rich:messages>
</a4j:outputPanel>
</td>
</tr>
</table>
<script>
function windowclose(){
// alert("treeview:taskconfirm:mpform:maximumSeverity" + document.all('treeview:taskconfirm:mpform:maximumSeverity').value);
if (document.all('treeview:taskconfirm:mpform:maximumSeverity')==null) {
Richfaces.hideModalPanel('task');
}
};
</script>
</a4j:outputPanel>
</a4j:form>
</ui:composition>