wood burning stoves 2.0*
The moose likes JSF and the fly likes Partial page refresh during page onload Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Java » JSF
Bookmark "Partial page refresh during page onload" Watch "Partial page refresh during page onload" New topic
Author

Partial page refresh during page onload

Swami Gopalan
Greenhorn

Joined: Apr 28, 2008
Posts: 1
Hi,

I am having problems when I make multiple PPR requests through AJAX at the time of onload of a page. This is what I am doing.



I have two panel boxes which have partial triggers from two different command links. So Panel box 1 has a partial trigger to command link L1 and Panel Box 2 has a partial trigger to command link L2.
On onload of the page body I click on command link L1 and L2 which internally calls two methods on a backing bean.


The problem I am facing is, when the backing method completes executing, it updates/refreshes only one panel. And this behaviour is very inconsistent. Sometimes panel box 1 gets updated/refreshed while sometimes panel box2 gets updated/refreshed. But never does both the panel boxes get updated/refreshed. I dont know if it is a bug in JSF or Browser . Can any one help me and tell what I am doing wrong here. I am giving my JSF code for reference below:



************************* Start *************************************
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:tr="http://myfaces.apache.org/trinidad"

xmlns:trh="http://myfaces.apache.org/trinidad/html">



<jsp:directive.page contentType="text/html;charset=utf-8" />

<script language="javascript">

function loadData() {

alert('before clicking');

var checkLoadStatus;

var contractLoadStatus;

checkLoadStatus = document.getElementById("checkloadStatus").value;

contractLoadStatus = document.getElementById("contractsloadStatus").value;

if(checkLoadStatus==0){

//alert('Check Load Status:['+checkLoadStatus+']');

document.getElementById("checksdataload").click();

//alert('Command Link clicked ');

document.getElementById("body1").style.cursor = "default";

document.getElementById("checkloadStatus").value = "1";

//alert('changed check load status');

}else{

alert('check load status not equal to 0');

}

if(contractLoadStatus==0){

//alert('Contract Load Status:['+contractLoadStatus+']');

document.getElementById("contractsdataload").click();

//alert('Command Link clicked ');

document.getElementById("body1").style.cursor = "default";

document.getElementById("contractsloadStatus").value = "1";

//alert('changed Contracts load status');

}else{

alert('contract load status not equal to 0');

}



alert('End of onload');

}







</script>



<f:view locale="#{preferLocale.locale}">



<trh:html id="html1">

<trh:head title="Member 360" id="head1">

<meta http-equiv="Content-Type"

content="text/html; charset=windows-1252" />

<link rel="stylesheet" charset="UTF-8" type="text/css"

href="/Advisor/iAdvisorWeb/bundles/ic/skins/CCABE/CCABECustom.css" />

</trh:head>





<trh:body id="body1" ONLOAD1="loadData();" >

<tr:form id="form1">



<trh:tableLayout width="100%" borderWidth="0" cellSpacing="1">

<trh:rowLayout valign="top">

<trh:cellFormat width="30%" height="100%" valign="top">

<trh:rowLayout valign="top">

<trh:cellFormat width="100%" height="50%" valign="top">

<tr:commandLink id="checksdataload" partialSubmit="#{!Provider360FlakesBean.checksDataLoaded}" actionListener="#{Provider360FlakesBean.loadChecksData}" />

<tr:inputHidden id="checkloadStatus" value="#{Provider360FlakesBean.checksData}"/>

<tr:panelBox id="checksPanelBox" partialTriggers="checksdataload" binding="#{Provider360FlakesBean.checksPanel}" contentStyle="border: 1px #2461AA solid;width: 230px; height: 170px;valign: top" background="transparent">

<trh:rowLayout width="100%" inlineStyle="background-color:#2461AA" valign="top" >

<trh:cellFormat>

<trutputText inlineStyle="font-family: Verdana;font-weight:bold; font-size: 10pt; color:#FFFFFF;margin-left:3px" value="Checks" />

</trh:cellFormat>

<trh:cellFormat halign="right" valign="middle">

<tr:commandLink id="CheckDetails" inlineStyle="border-color: thin solid #2461AA" disabled="#{!Provider360FlakesBean.checksDataLoaded}" partialSubmit="false" action="#{Provider360FlakesBean.openChecksDetails}" actionListener="#{Provider360FlakesBean.getAllCheckDetails}" >

<tr:image source="/xAdvisorWeb/images/details.GIF" shortDesc="Details" inlineStyle="background-color:#2461AA;border-color: #2461AA;align: right" />

</tr:commandLink>

</trh:cellFormat>

</trh:rowLayout>

<tr:panelBorderLayout inlineStyle="border-color:#2461AA; overflow: auto;" rendered="#{!Provider360FlakesBean.checksDataLoaded}">

<trh:rowLayout rendered="#{!Provider360FlakesBean.checksDataLoaded}">

<trh:cellFormat>

<tr:spacer width="1"/>

</trh:cellFormat>

<trh:cellFormat halign="center" valign="middle" height="100%">

<trutputText inlineStyle="font-family: Verdana;font-weight:bold; font-size: 12pt; color:Black" value="Loading Checks Data....">

</trutputText>

</trh:cellFormat>

</trh:rowLayout>

</tr:panelBorderLayout>

<tr:panelBorderLayout inlineStyle="border-color:#2461AA; overflow: auto;" rendered="#{Provider360FlakesBean.checksDataLoaded}">

<trh:rowLayout inlineStyle="padding:5px" valign="top">

<trh:cellFormat width="90%" valign="middle" halign="center">

<tr:table width="100%" inlineStyle="background-color: #FFFFFF;" var="checkSummary" value="#{Provider360FlakesBean.checkSummary}" rows="10">

<tr:column align="center" headerText="CheckNo" >

<tr:commandLink action="#{Provider360FlakesBean.openChecksDetails}" actionListener="#{Provider360FlakesBean.setSelectedCheckNo}">

<trutputText inlineStyle="font-family: Arial;font-weight: normal;font-size: 10pt" value="#{checkSummary.checkNo}"></trutputText>

</tr:commandLink>

</tr:column>

<tr:column align="center" headerText="Remit No" >

<tr:commandLink action="#{Provider360FlakesBean.openRemitDetails}" actionListener="#{Provider360FlakesBean.setSelectedRemitNo}">

<trutputText inlineStyle="font-family: Arial;font-weight: normal;font-size: 10pt" value="#{checkSummary.remitNo}"></trutputText>

</tr:commandLink>

</tr:column>

<tr:column align="center" headerText="Amount" >

<trutputText inlineStyle="font-family: Arial;font-weight: normal;font-size: 10pt" value="#{checkSummary.amount}"></trutputText>

</tr:column>

</tr:table>

</trh:cellFormat>

</trh:rowLayout>

</tr:panelBorderLayout>

</tr:panelBox>

</trh:cellFormat>

</trh:rowLayout>

<trh:rowLayout valign="top">

<trh:cellFormat width="100%" height="50%" valign="top">

<tr:commandLink id="contractsdataload" partialSubmit="true" actionListener="#{Provider360FlakesBean.loadContractsData}" />

<tr:inputHidden id="contractsloadStatus" value="#{Provider360FlakesBean.contractsDataLoadStatus}"/>

<tr:panelBox id="contractsPanelBox" partialTriggers="contractsdataload" binding="#{Provider360FlakesBean.contractsPanel}" contentStyle="border: 1px #2461AA solid;width: 230px; height: 170px;valign: top" background="transparent">

<trh:rowLayout width="100%" inlineStyle="background-color:#2461AA" valign="top">

<trh:cellFormat>

<trutputText inlineStyle="font-family: Verdana;font-weight:bold; font-size: 10pt; color:#FFFFFF;margin-left:3px" value="Provider Contracts" />

</trh:cellFormat>

<trh:cellFormat halign="right" valign="middle">

<tr:commandLink id="ContractDetails" inlineStyle="border-color: thin solid #2461AA" disabled="#{!Provider360FlakesBean.contractsDataLoaded}" action="#{Provider360FlakesBean.openContractList}" actionListener="#{Provider360FlakesBean.getAllContractsList}">

<tr:image source="/xAdvisorWeb/images/details.GIF" shortDesc="Details" inlineStyle="background-color:#2461AA;border-color: #2461AA;align: right"/>

</tr:commandLink>

</trh:cellFormat>

</trh:rowLayout>

<tr:panelBorderLayout inlineStyle="border-color:#2461AA; overflow: auto;" rendered="#{!Provider360FlakesBean.contractsDataLoaded}">

<trh:rowLayout rendered="#{!Provider360FlakesBean.contractsDataLoaded}">

<trh:cellFormat>

<tr:spacer width="1"/>

</trh:cellFormat>

<trh:cellFormat halign="center" valign="middle" height="100%">

<trutputText inlineStyle="font-family: Verdana;font-weight:bold; font-size: 12pt; color:Black" value="Loading Contracts Data....">

</trutputText>

</trh:cellFormat>

</trh:rowLayout>

</tr:panelBorderLayout>

<tr:panelBorderLayout inlineStyle="border-color:#2461AA; height: 148px; overflow: auto;" rendered="#{Provider360FlakesBean.contractsDataLoaded}">

<trh:rowLayout inlineStyle="padding:5px" valign="top">

<trh:cellFormat width="90%" valign="middle" halign="center">

<tr:table width="100%" inlineStyle="background-color: #FFFFFF;" var="contracts" value="#{Provider360FlakesBean.providerContracts}" rows="8">

<tr:column align="center" headerText="Contract#" noWrap="false">

<tr:commandLink action="#{Provider360FlakesBean.openContractList}" actionListener="#{Provider360FlakesBean.setSelectedContractNo}">

<trutputText inlineStyle="width:70px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left;font-family: Arial;font-weight: normal;font-size: 10pt" value="#{contracts.contractNo}" truncateAt="5" shortDesc="#{contracts.contractNo}"></trutputText>

</tr:commandLink>

</tr:column>

<tr:column align="center" headerText="Name" noWrap="false">

<trutputText inlineStyle="width:55px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left;font-family: Arial;font-weight: normal;font-size: 10pt" value="#{contracts.contractName}" truncateAt="5" shortDesc="#{contracts.contractName}"></trutputText>

</tr:column>

<tr:column align="center" headerText="Type" noWrap="false">

<trutputText inlineStyle="width:55px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left;font-family: Arial;font-weight: normal;font-size: 10pt" value="#{contracts.type}" truncateAt="5" shortDesc="#{contracts.type}"></trutputText>

</tr:column>

</tr:table>

</trh:cellFormat>

</trh:rowLayout>

</tr:panelBorderLayout>

</tr:panelBox>

</trh:cellFormat>

</trh:rowLayout>

</trh:cellFormat>

</trh:rowLayout>

</trh:tableLayout>

</tr:form>

</trh:body>

</trh:html>

</f:view>

</jsp:root>


******************************************* END **************************



The backing bean methods are as shown below:





public void loadChecksData(ActionEvent ae){

final String METHOD_NAME = "loadChecksData";

final long SLEEP_TIME = 3000;

System.out.println("Called:["+METHOD_NAME+"]");

try{

System.out.println("Sleeping for:["+SLEEP_TIME/1000+"] seconds");

for(int i=0;i<2500;i++){

}

System.out.println("Waking up from sleep ....!!!");

checksDataLoaded = true;

RequestContext context = RequestContext.getCurrentInstance();

Map pageFlowScope = context.getPageFlowScope();

checksData = "1";

pageFlowScope.put(CHECK_LOAD_STATUS, checksData);

checksPanel = new CorePanelBox();

checksPanel.setId("checksPanelBox");

RequestContext.getCurrentInstance ().addPartialTarget(checksPanel);

System.out.println("Added Partial Targets for checks...");

}catch(Exception e){

System.out.println("Exception occured during thread sleeping...");

e.printStackTrace();

}

System.out.println("End of method ...!!!");

}







public void loadContractsData(ActionEvent ae){

final String METHOD_NAME = "loadContractsData";

final long SLEEP_TIME = 6000;

System.out.println("Called:["+METHOD_NAME+"]");

try{

System.out.println("Waiting for:["+SLEEP_TIME/1000+"] seconds");

//Thread.currentThread().wait(SLEEP_TIME);

for(int i=0;i<5000;i++){

}



System.out.println("Waking up from sleep ....!!!");

contractsDataLoaded = true;

RequestContext context = RequestContext.getCurrentInstance();

Map pageFlowScope = context.getPageFlowScope();

contractsDataLoadStatus = "1";

pageFlowScope.put(CONTRACT_LOAD_STATUS, contractsDataLoadStatus);

contractsPanel = new CorePanelBox();

contractsPanel.setId("contractsPanelBox");

RequestContext.getCurrentInstance ().addPartialTarget(contractsPanel);

System.out.println("Added partial trigger for Contracts");

// contractsPanel.setRendered(true);

// contractsPanel.processUpdates(FacesContext.getCurrentInstance());

}catch(Exception e){

System.out.println("Exception occured during thread sleeping...");

e.printStackTrace();

}

System.out.println("End of method ...!!!");

}

[ April 28, 2008: Message edited by: Swami Gopalan ]

[ April 28, 2008: Message edited by: Swami Gopalan ]
[ April 28, 2008: Message edited by: Swami Gopalan ]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Partial page refresh during page onload