How to show processing image in tab?
Hi all,
I have 7 tabs in my page and swithType is ajax.So when i click the Tab2 or Tab3 or Tab3 i have to show the processing or processing modelpanel in my page.There i have to fetch the data from the backend.So there processing image is required.???
Below is my jsp page;
Tabs.jsp:
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Existing Customer-PostPaid</title>
</head>
<body>
<f:subview id="postpaidCustomerView">
<h:form id="postpaidCustomerForm">
<a4j:region id="postPaidMainRegion">
<h:panelGrid>
<!--Main table starts here -->
<table width="818" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="818" valign="top">
<table class="font" width="100%" cellpadding="1" cellspacing="1" border="0">
<tr>
<td>
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="25" bgcolor="#45aed8" style="background-repeat:no-repeat">
<table width="819" border="0" cellspacing="0.1" cellpadding="0.1">
<tr>
<td width="66%"><span class="font_white"> Home > Existing Customer > Postpaid</span></td>
<td width="12%"> </td>
<td width="15%"> </td>
<td width="5%"> </td>
<td width="2%"> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr align="center" class="header_table_inside">
<td width="123"><a href ="#General">General Info</a></td>
<td width="126"><a href ="#Billing">Billing Address</a></td>
<td width="131"><a href ="#Account">Account Details</a></td>
<td width="110"><a href ="#Services">Services</a></td>
<td width="98"><a href ="#Subscription">Subscription</a></td>
<td width="110"><a href ="#One">1 + 5 </a></td>
<td width="102"><a href ="#Arbor">Arbor Notes</a></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr height="19">
<td colspan="8" height="19"><span class="title_header_black">
<a name ="General" class="title_header_black"></a>General Information</span></td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<tr>
<td>
<div class="tabber" id="tab1">
<div class="tabbertab">
<!--tab General Information starts here -->
<a4j:jsFunction name="showTab2" actionListener="#{existingCustomerBean.submitActionTab2}" ajaxSingle="true" ></a4j:jsFunction>
<rich:tabPanel switchType="ajax" id="tp1" styleClass="tabbertab">
<rich:tab style="color: red" id="GeneralInfo" label="General Info" name="General Info" styleClass="myClass" oncomplete="showTab2()">
<a4j:region id="generalInforegion">
<a4j:include id="generalInformationPage" viewId="/existingcustomer/postpaid/genaralinformation/generalinfo/generalInformation.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab id="ExternalID" label="External ID" name="External ID" styleClass="myClass" switchType="ajax">
<a4j:region id="externalIDregion">
<a4j:include id="externalIDPage" viewId="/existingcustomer/postpaid/genaralinformation/externalID/externalID.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Identifier" name="Identifier" styleClass="myClass" ajaxSingle="true" switchType="ajax">
<a4j:region id="Identifierregion" renderRegionOnly="true">
<a4j:include id="identifierPage" viewId="/existingcustomer/postpaid/genaralinformation/identifier/identifier.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="TOS" name="TOS" styleClass="myClass" switchType="ajax">
<a4j:region id="Tosregion">
<a4j:include id="tosPage" viewId="/existingcustomer/postpaid/genaralinformation/tos/tos.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Extended Data" name="Extended Data" styleClass="myClass" switchType="ajax">
<a4j:region id="extendedregion">
<a4j:include id="extendedPage" viewId="/existingcustomer/postpaid/genaralinformation/extendeddata/extendedData.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab General Information ends here -->
</div>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr height="19">
<td colspan="8" height="19"><span class="title_header_black">
<a name ="Billing" class="title_header_black"></a>Billing Address Information</span></td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<tr>
<td><div class="tabber" id="tab4">
<div class="tabbertab">
<!--tab Billing Address Information starts here -->
<rich:tabPanel switchType="client" id="tp2" styleClass="tabbertab" >
<rich:tab label="Billing Address" name="Billing Address" styleClass="myClass">
<a4j:region id="billingAddressregion">
<a4j:include id="billingAddressPage" viewId="/existingcustomer/postpaid/billingaddressinformation/billingaddress/billingAddress.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Permanent Address" name="Permanent Address" styleClass="myClass" switchType="ajax">
<a4j:region id="permanentAddressregion">
<a4j:include id="permanentAddressPage" viewId="/existingcustomer/postpaid/billingaddressinformation/permanentaddress/permanentAddress.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Reference Information" name="Reference Information" styleClass="myClass" switchType="ajax">
<a4j:region id="referenceInformationregion">
<a4j:include id="referenceInformationPage" viewId="/existingcustomer/postpaid/billingaddressinformation/referenceinformation/referenceInformation.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab Billing Address Information ends here -->
</div>
</tr>
<tr>
<td> </td></tr>
<tr>
<td colspan="8" height="19"><span class="title_header_black">
<a name ="Account" class="title_header_black"></a>Account Details & Billing Information</span><br />
</td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<tr>
<td>
<div class="tabber" id="div2">
<div class="tabbertab">
<!--tab Account Details And Billing Information starts here -->
<rich:tabPanel switchType="client" id="tp3" styleClass="tabbertab" >
<rich:tab label="Account Details" name="AccountDetails" styleClass="myClass">
<a4j:region id="accountdetailsregion">
<a4j:include id="accountdetailsPage" viewId="/existingcustomer/postpaid/accountdetailsandbillinginformation/accountdetails/accountDetails.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Hierarchy" name="Hierarchy" styleClass="myClass" switchType="ajax">
<a4j:region id="hierarchyregion">
<a4j:include id="hierarchyPage" viewId="/existingcustomer/postpaid/accountdetailsandbillinginformation/hierarchy/hierarchy.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Corridors" name="Corridors" styleClass="myClass" switchType="ajax">
<a4j:region id="corridorsregion">
<a4j:include id="corridorsPage" viewId="/existingcustomer/postpaid/accountdetailsandbillinginformation/corridors/corridors.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Charge Rules" name="ChargeRules" styleClass="myClass" switchType="ajax">
<a4j:region id="cchargeRulesregion">
<a4j:include id="chargeRulesPage" viewId="/existingcustomer/postpaid/accountdetailsandbillinginformation/chargerules/changeRules.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Billing and Rating Information" name="BillingAndRatingInformation" styleClass="myClass" switchType="ajax">
<a4j:region id="billingAndRatingInforegion">
<a4j:include id="billingAndRatingInfoPage" viewId="/existingcustomer/postpaid/accountdetailsandbillinginformation/billingandratingInfo/billingAndRatingInformation.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab Account Details And Billing Information ends here -->
</div> </tr>
<tr><td> </td></tr>
<tr height="19">
<td colspan="8" height="19"><span class="title_header_black">
<a name ="Subscription" class="title_header_black"></a>Subscription Information</span></td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<!-- Removed here -->
<tr>
<td><div class="tabber" id="div5">
<div class="tabbertab">
<!--tab Subscription Information starts here -->
<rich:tabPanel switchType="client" id="tp4" styleClass="tabbertab">
<rich:tab label="Customer Aging" name="Customer Aging" styleClass="myClass">
<a4j:region id="customerAgingregion">
<a4j:include id="customerAgingPage" viewId="/existingcustomer/postpaid/subscriptioninformation/customeraging/customerAging.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Payment Details" name="Payment Details" styleClass="myClass" switchType="ajax">
<a4j:region id="paymentDetailsregion">
<a4j:include id="paymentDetailsPage" viewId="/existingcustomer/postpaid/subscriptioninformation/paymentdetails/paymentDetails.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Payment Method" name="Payment Method" styleClass="myClass" switchType="ajax">
<a4j:region id="paymentMethodregion">
<a4j:include id="paymentMethodPage" viewId="/existingcustomer/postpaid/subscriptioninformation/paymentmethod/paymentMethod.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Deposit and Refund" name="Deposit and Refund" styleClass="myClass" switchType="ajax">
<a4j:region id="depositAndRefundregion">
<a4j:include id="depositAndRefundPage" viewId="/existingcustomer/postpaid/subscriptioninformation/depositandrefund/depositandrefund.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Invoices" name="Invoices" styleClass="myClass" switchType="ajax">
<a4j:region id="invoicesregion">
<a4j:include id="invoicesPage" viewId="/existingcustomer/postpaid/subscriptioninformation/invoices/invoices.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Adjustments" name="Adjustments" styleClass="myClass" switchType="ajax">
<a4j:region id="adjustmentsregion">
<a4j:include id="adjustmentsPage" viewId="/existingcustomer/postpaid/subscriptioninformation/adjustments/adjustments.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab Subscription Information ends here -->
</div>
</div>
<div class="tabber" id="div15"></div>
</div>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="8" height="19"><span class="title_header_black">
<a name ="One" class="title_header_black"></a>Services Information</span><br />
</td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<tr>
<td colspan="8" height="19"><div class="tabber" id="tab3">
<div class="tabbertab">
<!--tab Services Information starts here -->
<rich:tabPanel switchType="client" id="tp5" styleClass="tabbertab">
<rich:tab label="Services" name="Services" styleClass="myClass">
<a4j:region id="servicesregion">
<a4j:include id="servicesPage" viewId="/existingcustomer/postpaid/servicesinformation/services/services.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Contract" name="Contract" styleClass="myClass">
<a4j:region id="contractregion">
<a4j:include id="contractPage" viewId="/existingcustomer/postpaid/servicesinformation/contract/contract.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Charges" name="Charges" styleClass="myClass">
<a4j:region id="chargesregion">
<a4j:include id="chargesPage" viewId="/existingcustomer/postpaid/servicesinformation/charges/charges.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Components" name="Components" styleClass="myClass">
<a4j:region id="componentsregion">
<a4j:include id="componentsPage" viewId="/existingcustomer/postpaid/servicesinformation/component/components.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Service Management" name="Service Management" styleClass="myClass">
<a4j:region id="serviceManagementregion">
<a4j:include id="serviceManagementPage" viewId="/existingcustomer/postpaid/servicesinformation/servicemanagement/servicemanagement.jsp"/>
</a4j:region>
</rich:tab>
<rich:tab label="Order Status" name="Order Status" styleClass="myClass">
<a4j:region id="orderStatusregion">
<a4j:include id="orderStatusPage" viewId="/existingcustomer/postpaid/servicesinformation/orderstatus/orderstatusmain.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab Services Information ends here -->
</div>
</div></td>
</tr>
<tr>
<td colspan="8" height="19"> </td>
</tr>
<tr>
<td colspan="8" height="19"><span class="title_header_black">
<a name= "Arbor" class="title_header_black"></a>Arbor Notes</span><br />
</td>
</tr>
<tr>
<td height="2" bgcolor="#45aed8"></td>
</tr>
<tr>
<td colspan="8" height="19"><div class="tabber" id="div">
<div class="tabbertab">
<!--tab Arbor Notes starts here -->
<rich:tabPanel switchType="client" id="tp6" styleClass="tabbertab">
<rich:tab label="Arbor Notes" name="Arbor Notes" styleClass="myClass">
<a4j:region id="arbornotesregion">
<a4j:include id="arbornotesPage" viewId="/existingcustomer/postpaid/arborNotes/arbornotes.jsp"/>
</a4j:region>
</rich:tab>
</rich:tabPanel>
<!--tab Arbor Notes ends here -->
</div>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td>
<h:commandLink id="next1" action="#{existingCustomerBean.submitPostpaidDetailsNext}" type="submit">
<h:graphicImage alt="Next" title="Next" id="btnNextID" value="../_assets/image/btnNext.png"/>
</h:commandLink>
<a4j:commandLink id="next" action="#{existingCustomerBean.submitPostpaidDetailsNext}">
<h:graphicImage alt="Next" title="Next" id="btnNextID1" value="../_assets/image/btnNext.png"/>
</a4j:commandLink>
<h:commandButton id="nextbtn" value="Next" immediate="true" rendered="postpaidCustomerView,contentPage"
action="#{existingCustomerBean.submitPostpaidDetailsNext}"/>
<a4j:commandButton value="Next Page >>" immediate="true" limitToList="true"
rendered="postpaidCustomerView,contentPage" type="submit"
action="#{existingCustomerBean.submitPostpaidDetailsNext}"
style="float: left;" image="../_assets/image/next.png">
</a4j:commandButton>
</td>
</tr>
</table>
</h:panelGrid>
</a4j:region>
</h:form>
</f:subview>
</body>
</html>
For example if i am traveling from External ID to Identifier Tab means i have to show processing image OR background i should edit anything and the processing message should display how to do that.image is attached also.Heave a look.
Thanks and Regards,
Siva
