+ Start a Discussion
AKallAKall 

basic help with partial page refresh

Hi all,

I'm trying to figure out a partial refresh. The first selectList is working fine. Upon making a selection there I want the page to reRender to show another selectList based on what was chosen. I have the controller and the page built up to this point but for the life of me cannot get the page to reRender. I gave up on trying to reRender the second selectList and just tried to get the page to reRender by using a timestamp as proof. This is version that I have posted below. What is it that is stopping it from reRendering?

<apex:page Controller="eventLineUPController" id="thePage"> <apex:form > <apex:pageBlock id="thePageBlock"> <apex:pageBlockSection title="Event Line Up Wizard" columns="1" collapsible="false" id="teamSelectSection" columns="1"> <apex:pageBlockSectionItem > <apex:outputPanel > <apex:actionRegion id="AR1"> <apex:selectList id="teamList" value="{!selectedTeam}" size="1"> <apex:selectOptions value="{!TeamOptions}"/> <actionSupport event="onchange" rerender="tester" status="status1"/> </apex:selectList> <apex:actionStatus startText="Processing..."for="AR1" id="status1"/> </apex:actionRegion> </apex:outputPanel> </apex:pageBlockSectionItem> <apex:outputPanel id="tester"> {!text(now())} </apex:outputPanel> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
AKallAKall

Hi weznolte,

Thanks for the suggestion. I actually just figured this out myself. Eventually I gave up and decided to just re-type the whole thing. In doing that I noticed a problem with my syntax. You can see in the code I posted that I declared the 'columns' attribute twice in the first pageBlockSection. It's strange that a save error did not happen. So, after retyping without that everything is working fine.Thanks for the code you posted I will have a look at it to see if it helps me.

 

-Andy

All Answers

WesNolte__cWesNolte__c

Hey

 

For debugging I'd suggest reducing the page(for now) so that you can narrow down the exact issue, and then build it back up again i.e.

 

 

<apex:page Controller="eventLineUPController" id="thePage"> <apex:form > <apex:actionRegion id="AR1"> <apex:selectList id="teamList" value="{!selectedTeam}" size="1"> <apex:selectOptions value="{!TeamOptions}"/> <actionSupport event="onchange" rerender="tester" status="status1"/> </apex:selectList> <apex:actionStatus startText="Processing..."for="AR1" id="status1"/> <apex:outputPanel id="tester"> {!selectedTeam} </apex:outputPanel> </apex:actionRegion> </apex:form> </apex:page>

Try debugging with that code and let me know how it goes. I'm also posting some code I've used to achieve your AJAX refreshed related list..

 

 

<apex:actionRegion > <apex:outputPanel layout="block" style="width:100%;float:left"> <apex:outputLabel value="Community" styleClass="shareLabel"/> <apex:selectList size="1" value="{!selectedCommunity}"> <apex:selectOptions value="{!communities}"/> <apex:actionSupport event="onchange" rerender="comms" status="myStatus"/> </apex:selectList> </apex:outputPanel> <apex:outputPanel id="categories" layout="block" style="width:100%;float:left" > <apex:outputLabel value="Category" styleClass="shareLabel"/> <apex:selectList size="1" value="{!selectedCategory}"> <apex:selectOptions value="{!categories}" /> </apex:selectList> <apex:actionStatus id="myStatus"> <apex:facet name="stop"/> <apex:facet name="start"> <apex:outputPanel > <apex:image url="{!$Resource.Loading_Gif}" style="vertical-align:middle"/> </apex:outputPanel> </apex:facet> </apex:actionStatus> </apex:outputPanel> </apex:actionRegion>

 

 The formatting has gone all crazy-like, but that should give you the gist.

 

Cheers,

Wes 

 

 

AKallAKall

Hi weznolte,

Thanks for the suggestion. I actually just figured this out myself. Eventually I gave up and decided to just re-type the whole thing. In doing that I noticed a problem with my syntax. You can see in the code I posted that I declared the 'columns' attribute twice in the first pageBlockSection. It's strange that a save error did not happen. So, after retyping without that everything is working fine.Thanks for the code you posted I will have a look at it to see if it helps me.

 

-Andy

This was selected as the best answer
AKallAKall

Hi Wes,

My struggles with this page continue. I hope you are still willing to help.  So now that I have managed to get the second picklist to reRender with values as defined by the selection made in the first picklist. It is now my wish to use the Render attribute on that second picklist so that it only appears on the screen when a value has been picked for the picklist it is dependent on. So,the way I have set this up is to have a Boolean property that returns true when the variable fed by the first picklist does not equal null, which is the same condition that I have used to control the selection of the values for the second selectList. The condition works in the method that creates the selecList but not in the property that controls its apperance...strange. To debug this I tried making it so that the property would always return true to test wether or not my the value in my Render attribute was actually finding the property. That worked fine. And, worked as expected when I made it return false as well. So, it seems to me there is either something wrong in my syntax in the property, which I don't think there is, or there is something I don't understand about the order of execution. I have posted the code below and underlined the segments that should be the focus.

<apex:page controller="eventLineUPController" id="thePage">
<apex:form >
<apex:pageBlock id="thePageBlock1">
<apex:pageBlockSection title="Event Line Up Wizard" collapsible="false" columns="1" id="teamSelectSection">
<apex:pageBlockSectionItem >
<apex:outputPanel id="OP1">
<apex:outputText ><h1>Please Select a Team</h1></apex:outputText>
<apex:actionRegion id="AR1">
<apex:selectList id="teamList" value="{!selectedTeam}" size="1">
<apex:selectOptions value="{!TeamOptions}"/>
<apex:actionSupport event="onchange" reRender="OP2"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="meetSelectionSection" rendered="{!showMeetOptions}">
<apex:outputPanel id="OP2" >
<apex:outputText ><h1>Please Select a Meet</h1></apex:outputText>
<apex:actionRegion id="AR2">
<apex:selectList id="meetList" value="{!selectedMeet}" size="1">
<apex:selectOptions value="{!MeetOptions}"/>
<apex:actionSupport event="onchange" reRender="OP3"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="eventSelectionSection">
<apex:outputPanel id="OP3">
<apex:outputText ><h1>Please Select an Event</h1></apex:outputText>
<apex:actionRegion id="AR3">
<apex:selectList id="eventList" value="{!selectedEvent}" size="1">
<apex:selectOptions value="{!eventOptions}"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

public class eventLineUPController {

//Current Page and User
ID UP = Userinfo.getUserID();
String pageRef = ApexPages.CurrentPage().getURL();
User elUser = [select ID, Name, BusinessChannel__c from User where ID =:UP];

//SelectOption Variables
public String SelectedTeam {get; set;}
public String selectedMeet {get; set;}
public String selectedEvent {get; set;}
public List<Meet__c> Meets {get; set;}
public List<Events__c> Events {get; set;}
public List<Contact> Swimmers {get; set;}

//Sets up list of Teams according to user
public Set<ID> myTeams = new Set<ID>();
public void setUpMyTeams() {
for(AccountResponsibility__c[] teamResps : [select Account__c from AccountResponsibility__c where User__c =:UP ORDER BY LastModifiedDate Limit 1000]) {
for(AccountResponsibility__c teamResp : teamResps) {
myTeams.add(teamResp.Account__c);
}
}
}

public Integer Limiter{get; set;}


//CONSTRUCTOR
public eventLineUPController() {
this.limiter = (null!=System.currentPageReference().getParameters().get('limit'))?Integer.valueOf(System.currentPageReference().getParameters().get('limit')):10;
this.setUpMyTeams();
}


//DISPLAY CONTROLS
public Boolean showMeetOptions{
//if a team has been selected then this enables the rerender of the meet section of the page so that a meet can be chosen
get {
return Null != this.selectedTeam;
}

}


//TEAMS METHODS
public List<SelectOption> getTeamOptions() {
List<SelectOption> coachesTeams = new List<SelectOption>();
coachesTeams.add(new SelectOption('',''));
for(Account Team : [Select Id, Name from Account where ID IN :myTeams ORDER BY Name]) {
coachesTeams.add(new SelectOption(Team.ID,Team.Name));
}
return coachesTeams;
}



//MEET METHODS
public List<SelectOption> getMeetOptions() {
List<ID> filteredMeets = new List<ID>();
List<SelectOption> coachesMeets = new List<SelectOption>();
if(Null != this.selectedTeam) {
for(MeetCompetitors__c M1 : [select ID, Name,Meet__c from MeetCompetitors__c where CompetingTeam__c = :this.selectedTeam]) {
//system.assert(false,'These are your meets '+M1.Meet__c);
filteredMeets.add(M1.Meet__c);
}
coachesMeets.add(new SelectOption('',''));
for(Meet__c Meet : [Select Id, Name from Meet__c where ID IN :filteredMeets ORDER BY Name]) {
coachesMeets.add(new SelectOption(Meet.ID,Meet.Name));
}
}
return coachesMeets;
}


//EVENT METHODS
public List<SelectOption> getEventOptions() {
List<ID> filteredEvents = new List<ID>();
List<SelectOption> eventOptions = new List<SelectOption>();
if(null != this.selectedMeet) {
for(MeetsEvents__c eventGrabber : [select ID, Events__c, Name, Meet__c from MeetsEvents__c where Meet__c = :this.selectedMeet ]) {
filteredEvents.add(eventGrabber.Events__c);
}
eventOptions.add(new SelectOption('',''));
for(Events__c eventOption : [Select ID, Name from Events__c where ID IN :filteredEvents ORDER BY Name]) {
eventOptions.add(new SelectOption(eventOption.ID, eventOption.Name));
}
}
return eventOptions;
}


}

 

 

 

WesNolte__cWesNolte__c

Hey

 

Try this,

 

<apex:pageBlockSectionItem id="meetSelectionSection" rendered="{!showMeetOptions}">
<apex:outputPanel id="OP2" rendered="{!showMeetOptions}"
>
<apex:outputText ><h1>Please Select a Meet</h1></apex:outputText>
<apex:actionRegion id="AR2">
<apex:selectList id="meetList" value="{!selectedMeet}" size="1">
<apex:selectOptions value="{!MeetOptions}"/>
<apex:actionSupport event="onchange" reRender="OP3"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>

 

Wes

AKallAKall

Tried that already. It doesn't work.

 

Another thing I tried that might help you to know...rather than use the expression Null != this.selectedTeam I tried this.selectedTeam.length>0 this gave me a Null Pointer Exception error, which indicates to me that the variable hasn't been set at that point for some reason, which is why I think this may have something to do with execution order. I tried moving the property further down the page. I have also tried rewritting it in several different ways for example

 

getshowMeetOptions() {

    if(null != this.selectedTeam) {

       return true;

}

}

 

Nothing has worked yet.

WesNolte__cWesNolte__c

Hey

 

There can be issues when you 'rerender' an element that uses 'rendered'. Try the stuff in red,

 

<apex:page controller="eventLineUPController" id="thePage">
<apex:form >
<apex:pageBlock id="thePageBlock1">
<apex:pageBlockSection title="Event Line Up Wizard" collapsible="false" columns="1" id="teamSelectSection">
<apex:pageBlockSectionItem >
<apex:outputPanel id="OP1">
<apex:outputText ><h1>Please Select a Team</h1></apex:outputText>
<apex:actionRegion id="AR1">
<apex:selectList id="teamList" value="{!selectedTeam}" size="1">
<apex:selectOptions value="{!TeamOptions}"/>
<apex:actionSupport event="onchange" reRender="meetSelectionSection
"/>

</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="meetSelectionSection" rendered="{!showMeetOptions}">
<apex:outputPanel id="OP2" rendered="{!showMeetOptions}">
<apex:outputText ><h1>Please Select a Meet</h1></apex:outputText>
<apex:actionRegion id="AR2">
<apex:selectList id="meetList" value="{!selectedMeet}" size="1">
<apex:selectOptions value="{!MeetOptions}"/>
<apex:actionSupport event="onchange" reRender="OP3"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="eventSelectionSection">
<apex:outputPanel id="OP3">
<apex:outputText ><h1>Please Select an Event</h1></apex:outputText>
<apex:actionRegion id="AR3">
<apex:selectList id="eventList" value="{!selectedEvent}" size="1">
<apex:selectOptions value="{!eventOptions}"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

If that doesn't work, try this,

 

 

<apex:page controller="eventLineUPController" id="thePage">
<apex:form >
<apex:pageBlock id="thePageBlock1">
<apex:pageBlockSection title="Event Line Up Wizard" collapsible="false" columns="1" id="teamSelectSection">
<apex:pageBlockSectionItem >
<apex:outputPanel id="OP1">
<apex:outputText ><h1>Please Select a Team</h1></apex:outputText>
<apex:actionRegion id="AR1">
<apex:selectList id="teamList" value="{!selectedTeam}" size="1">
<apex:selectOptions value="{!TeamOptions}"/>
<apex:actionSupport event="onchange" reRender="OP2"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="meetSelectionSection" rendered="{!showMeetOptions}">
<apex:outputPanel id="OP2"> <apex:outputPanel rendered="{!showMeetOptions}">
<apex:outputText ><h1>Please Select a Meet</h1></apex:outputText>
<apex:actionRegion id="AR2">
<apex:selectList id="meetList" value="{!selectedMeet}" size="1">
<apex:selectOptions value="{!MeetOptions}"/>
<apex:actionSupport event="onchange" reRender="OP3"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel> </apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="eventSelectionSection">
<apex:outputPanel id="OP3">
<apex:outputText ><h1>Please Select an Event</h1></apex:outputText>
<apex:actionRegion id="AR3">
<apex:selectList id="eventList" value="{!selectedEvent}" size="1">
<apex:selectOptions value="{!eventOptions}"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

 

 

And to make sure your getting is being called perhaps use a debug message:

 

getshowMeetOptions() {

    if(null != this.selectedTeam) {

       System.debug('getshowMeetOptions: true');

       return true;

}

       System.debug('getshowMeetOptions: false');

return false;

}

 

Let me know if either of these works.

 

Wes

 

AKallAKall

Back from work and ready for another long night!

 

So, I tried all of your suggestions and still nothing. Even the debugs in the getter don't appear. I wrote the getter as you suggested, and just to be sure that my page was finding it I simply replaced the code inside of it with 'return true;' The section rendered so I guess this means that the basic getter is working. So, it's my guess that when the reRender takes place (i think this is called a post back request?) the getter is not being processed. Any more ideas?

 

Thanks Alot!

 

andy

AKallAKall

I got it. I think you were right about using the render attribute on the tag that is called by a reRender. The thing that was holding me back was this little gem that I found in the VF Developer guide in the definition on pageBlockSectionItem: "Also note that pageBlockSectionItem components cannot be rerendered; rerender the child components instead." So, I did exactly that and it works!. Seems kind of messy, though. This is what it looks like:

 

 

<apex:pageBlockSectionItem >
<apex:outputPanel id="OP1">
<apex:outputText ><h1>Please Select a Team</h1></apex:outputText>
<apex:actionRegion id="AR1">
<apex:selectList id="teamList" value="{!selectedTeam}" size="1">
<apex:selectOptions value="{!TeamOptions}"/>
<apex:actionSupport event="onchange" reRender="OP2"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem id="meetSelectionSection" >
<apex:outputPanel id="OP2" >
<apex:outputText rendered="{!showMeetOptions}"><h1>Please Select a Meet</h1> </apex:outputText>
<apex:actionRegion id="AR2" rendered="{!showMeetOptions}">
<apex:selectList id="meetList" value="{!selectedMeet}" size="1">
<apex:selectOptions value="{!MeetOptions}"/>
<apex:actionSupport event="onchange" reRender="OP3"/>
</apex:selectList>
</apex:actionRegion>
</apex:outputPanel>
</apex:pageBlockSectionItem>