6 Replies Latest reply on Jun 3, 2009 12:32 PM by nbelaevski

    loading data on tab click

      Hi There,

      i had a situation in which i need to load pages depending on the tab selected like this

      <rich:tab label="Manage Courses" id="manageCoursesTab"
       binding="#{homeBean.manageCoursesTab}">
       <%@ include file="/pages/manageCourses.jsp"%> </rich:tab>
      


      In my manageCourses.jsp i had this

      <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <!-- RichFaces tag library declaration -->
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
      <html>
      <head>
      <title>:: Manage Courses ::</title>
      </head>
      <body>
      <f:subview id="manageCourseList">
       <a4j:region>
       <rich:dataTable value="#{manageCoursesBean.courseList}" var="course"
       rows="20" rowKeyVar="row" ajaxKeys="#{manageCoursesBean.keys}"
       id="manageCoursesTable">
       <f:facet name="header">
       <h:outputText value="Manage Courses" />
       </f:facet>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Course Id" />
       </f:facet>
       <h:outputText value="#{course.courseId}" id="courseId" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Course Name" />
       </f:facet>
       <h:outputText value="#{course.courseName}" id="courseName" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="No Of Seats" />
       </f:facet>
       <h:outputText value="#{course.noOfSeats}" id="noOfSeats" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="On Date" />
       </f:facet>
       <h:outputText value="#{course.onDate}" id="onDate" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Course Time" />
       </f:facet>
       <h:outputText value="#{course.courseTime}" id="courseTime" />
       </rich:column>
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Location" />
       </f:facet>
       <h:outputText value="#{course.location}" id="location" />
       </rich:column>
      
       <rich:column>
       <f:facet name="header">
       <h:outputText value="Is Course Expired" />
       </f:facet>
       <h:outputText value="#{course.isCourseExpired}" id="isCourseExpired" />
       </rich:column>
      
       <rich:column>
       <f:facet name="header">
       Actions
       </f:facet>
       <a4j:commandLink ajaxSingle="true" id="editlink"
       oncomplete="#{rich:component('editPanel')}.show()">
       <h:graphicImage value="/Images/edit.gif" style="border:0" />
       <f:setPropertyActionListener value="#{course}"
       target="#{manageCoursesBean.currentItem}" />
       <f:setPropertyActionListener value="#{row}"
       target="#{manageCoursesBean.currentRow}" />
       </a4j:commandLink>
       <rich:toolTip for="editlink" value="Edit Course" />
       <a4j:commandLink ajaxSingle="true" id="deletelink"
       oncomplete="#{rich:component('deletePanel')}.show()">
       <h:graphicImage value="/Images/delete.gif" style="border:0" />
       <f:setPropertyActionListener value="#{row}"
       target="#{manageCoursesBean.currentRow}" />
       </a4j:commandLink>
       <rich:toolTip for="deletelink" value="Delete Course" />
       </rich:column>
       <f:facet name="footer">
       <rich:datascroller renderIfSinglePage="false" maxPages="5" />
       </f:facet>
       </rich:dataTable>
       </a4j:region>
      </f:subview>
      <rich:modalPanel id="editPanel" autosized="true" width="450">
       <f:facet name="header">
       <h:outputText value="Edit Course Details" />
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/Images/close.png" id="hidelink"
       styleClass="hidelink" />
       <rich:componentControl for="editPanel" attachTo="hidelink"
       operation="hide" event="onclick" />
       </h:panelGroup>
       </f:facet>
       <h:form>
       <rich:messages style="color:red;"></rich:messages>
       <h:panelGrid columns="1">
       <a4j:outputPanel ajaxRendered="true">
       <h:panelGrid columns="2">
       <h:outputText value="Course Name" />
       <h:inputText value="#{manageCoursesBean.currentItem.courseName}" />
       <h:outputText value="No Of Seats" />
       <h:inputText value="#{manageCoursesBean.currentItem.noOfSeats}" />
       <h:outputText value="On Date" />
       <rich:calendar value="#{manageCoursesBean.currentItem.onDate}" />
       <h:outputText value="Course Time" />
       <h:inputText value="#{manageCoursesBean.currentItem.courseTime}" />
       <h:outputText value="Location" />
       <h:inputText value="#{manageCoursesBean.currentItem.location}" />
       <h:outputText value="Is Course Expired" />
       <h:selectOneMenu
       value="#{manageCoursesBean.currentItem.isCourseExpired}">
       <f:selectItem itemLabel="Yes" itemValue="Y" />
       <f:selectItem itemLabel="No" itemValue="N" />
       </h:selectOneMenu>
       </h:panelGrid>
       </a4j:outputPanel>
       <a4j:commandButton value="Update"
       action="#{manageCoursesBean.updateCourseInfo}"
       reRender="courseName, noOfSeats, onDate, courseTime, location"
       oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();" />
       </h:panelGrid>
       </h:form>
      </rich:modalPanel>
      <rich:modalPanel id="deletePanel" autosized="true" width="200">
       <f:facet name="header">
       <h:outputText value="Delete this course from list ?"
       style="padding-right:15px;" />
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/Images/close.png" styleClass="hidelink"
       id="hidelink2" />
       <rich:componentControl for="deletePanel" attachTo="hidelink2"
       operation="hide" event="onclick" />
       </h:panelGroup>
       </f:facet>
       <h:form>
       <table width="100%">
       <tbody>
       <tr>
       <td align="center" width="50%"><a4j:commandButton value="Yes"
       ajaxSingle="true" action="#{manageCoursesBean.deleteCourse}"
       oncomplete="#{rich:component('deletePanel')}.hide();"
       reRender="table" /></td>
       <td align="center" width="50%"><a4j:commandButton
       value="Cancel"
       onclick="#{rich:component('deletePanel')}.hide();return false;" />
       </td>
       </tr>
       </tbody>
       </table>
       </h:form>
      </rich:modalPanel>
      <a4j:status onstart="#{rich:component('wait')}.show()"
       onstop="#{rich:component('wait')}.hide()" />
      <rich:modalPanel id="wait" autosized="true" width="200" height="120"
       moveable="false" resizeable="false">
       <f:facet name="header">
       <h:outputText value="Processing" />
       </f:facet>
       <h:outputText value="Wait Please..." />
      </rich:modalPanel>
      <rich:messages></rich:messages>
      </body>
      </html>
      


      but when i tried to load the page by clicking on the tab
      i cant see anything other than a blank screen with some script error saying

      Error: unknown runtime error
      


      please help me in understanding the mistake i made.

      added to that i want the data to be populated into the page when i click the tab. How can i do that...?