+ Start a Discussion
Thomas FullerThomas Fuller 

Apex/Visualforce - Issue with "rerender" Attribute When Trying to Refresh pageBlockTable

Hey everybody,

I’ve recently encountered a problem with a project that I’m working on. I’m trying to dynamically rerender a pageBlockTable after the list it references to has been updated. I’ve been looking around the web for any possible solution to this issue, but with no success. I was wondering if any developers out there would mind looking through my code and help me debug this issue.

Background:

I have a visualforce page that has two tabs. One tab allows the user to search for contact records and then add any selected contact records to a new custom object record with a master-detail relationship. The second tab is used to list the 20 most recent of these “contact record lists” and allow the user to view all the children of each of these custom lists. The ideal user experience should be that the user searches for a list of contact records, the user adds them to a list, the user then clicks the second tab, and the user sees the newly created custom list in the pageBlockTable that houses all recent “custom record lists”.

Issue:

I was able to get the functionality to work, but the user is not able to see the newly created list in real time. In order to see it the user must refresh the page.

User-added image
 
User-added image
 

Code:

VF Page:
<apex:page controller="mLSearchController">
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<style>
...
		</style>
	</head>
	<body>
		<apex:form id="mLSearch">
			<apex:sectionHeader title="Marketing List Search" help="http://developer.force.com"/>
			<apex:tabPanel switchType="client" selectedTab="mainTab" id="mLTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" >
...
				<!-- TAB 2: LISTS -->
				<apex:tab label="Lists" name="savedTab" id="searchTab2" style="font-size:12px;">
					<apex:pageBlock id="containerResults" title="Lists" mode="edit">
						<apex:actionFunction action="{!selectContainer}" name="selectContainer" rerender="listResults">
							<apex:param name="container_sel_mL" value="" />
						</apex:actionFunction>
						<apex:actionFunction action="{!doNothing}" name="rerenderContainers" rerender="containerResults"/>
						<apex:actionFunction action="{!updateMLContainers}" name="updateContainers" rerender="containerResults"/>
...
			</apex:tabPanel>     
		</apex:form>
		<div id="opaque"/>
		<div id="popupcontent1" class="popupcontent">
			<apex:form id="popup001">
				<apex:pageBlock title="My Content" mode="edit">
					<apex:pageBlockButtons>
						<input type="button" class="btn" onclick="passListName();" Value="Create New List"/>
						<apex:commandButton action="{!createList}" value="Create List"/>
					</apex:pageBlockButtons>
					<apex:pageBlockSection title="My Content Section1" columns="1">
						<p>Industry:</p>
						<input type="text" name="mLName" id="container_name_mL"/>
					</apex:pageBlockSection>
				</apex:pageBlock>
			</apex:form>
		</div>
		<script type="text/javascript">
			function passListName() {
				var x = j$('#container_name_mL').val();
				if ((x!=null && x!="") && (x.length < 20)) {
					createNewList(
						document.getElementById("container_name_mL").value
					);
					hidepopup();
					updateContainers();
					rerenderContainers();
					prependColumns();
				} else {
					alert("You must enter name that is less than 20 characters.");
					return false;
				}
			}
			
			function showpopup()
			{
				document.getElementById('opaque').style.display='block';
				var popUp = document.getElementById("popupcontent1");
				popUp.style.display = "block";
			} 
			
			function hidepopup()
			{
				var popUp = document.getElementById("popupcontent1");
				popUp.style.display = "none";
				document.getElementById('opaque').style.display='none';
			}
			
			function prependColumns() {
				j$('.inputSection span').wrap("<a class='linkSelector' onclick='selConFunction(this)'></a>");
			}
			
			function selConFunction(e) {
				var containerString = j$(e).find('span').text();
				selectContainer(containerString);
				return false;
			}
		</script>
    </body>
	
	<!-- All "..." in the document signify excerpts that were taken out because they were irrelevant. -->
</apex:page>
Apex Controller:
public with sharing class mLSearchController
{
	private String soqlContainer {get;set;}
	private String soqlMList {get;set;}
	public List<contactWrapper> contacts {get;set;} // this is the list of contacts queried from the search page
	public List<contactWrapper> leadList {get;set;} // this is the list of leads queried from the search page
	public List<ML_List_Container__c> containerList {get;set;}
	public List<ML_List__c> mList {get;set;}
	public List<contactWrapper> selectedList {        
		get {
            if (selectedList == null) selectedList = new List<contactWrapper>();
            return selectedList;
        }
        set;
	}

	public mLSearchController() {
		updateMLContainers();
	}

...
	
    public PageReference createList(){
     	List<ML_List__c> batchList = new List<ML_List__c>();
		ML_List_Container__c newContainer = new ML_List_Container__c();
     	String container_name_mL = Apexpages.currentPage().getParameters().get('container_name_mL');
     	
     	selectedList.clear();
		
		for (contactWrapper cw : contacts) {
			if (cw.checked)
				selectedList.add(new contactWrapper(cw.conObj));
		}
		for (contactWrapper cwL : leadList) {
			if (cwL.checked)
				selectedList.add(new contactWrapper(cwL.leadObj));
		}
     	
     	newContainer.Name = container_name_mL;
     	try {
			insert newContainer;
		} catch (Exception e) {
			ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'ERROR - Something is wrong...'));
		}
     	for (contactWrapper newItem : selectedList) {
     		ML_List__c newListItem = new ML_List__c();
     		newListItem.ML_List_Container__c = newContainer.Id;
     		if (newItem.conObj != null) {
	     		newListItem.Name = newItem.conObj.Name;
	     		newListItem.Contact__c = newItem.conObj.Id;
	     		batchList.add(newListItem);
     		} else if (newItem.leadObj != null) {
 				newListItem.Name = newItem.leadObj.Name;
     			newListItem.Lead__c = newItem.leadObj.Id;
     			batchList.add(newListItem);
     		}
     	}
     	insert batchList;
    	return null;
    }

    public PageReference doNothing() {
    	return null;
	}
    
    public PageReference selectContainer() {
    	String container_sel_mL = Apexpages.currentPage().getParameters().get('container_sel_mL');
    	soqlMList = 'SELECT Name, Contact__c, Lead__c FROM ML_List__c where ML_List_Container__r.Name = :container_sel_mL';
    	mList = Database.query(soqlMList);
    	return null;
    }
    
    public PageReference updateMLContainers() {
    	soqlContainer = 'SELECT Name, CreatedDate FROM ML_List_Container__c ORDER BY CreatedDate desc LIMIT 20';
		containerList = Database.query(soqlContainer);
		system.debug('Well, I think that something is off...');
    	return null;
    }
}

// All "..." in the document signify excerpts that were taken out because they were irrelevant.



Failed Solutions:
  • Directing “rerendering” to the id attribute in the pageBlockTable
  • Directing “rerendering” to the id attribute in the pageBlock
  • Wrapping outputPanel around the desired pageBlockTable, and directing “rerendering” to the id attribute in the outputPanel
  • Even tried using javascript to set a timed rerender function that would just rerender the desired section after 2 seconds.

Conclusion:

At this point, I’m pretty stumped as to why the pageBlockTable is not rerendering. I was hoping that some developers out there might be kind enough to help me out with this problem. Thanks so much for your time. Any and all suggestions/ideas are greatly appreciated.
Jim JamJim Jam
This might be a bit difficult to explain but I'll have a go ....

1. Create a property in your Apex class, say .. public string tabOpt{get; set;}
2. In class constructor method of class set value of this property to name of default main panel .. ie.mainTab ?
3. In methods where you wish to change panels, set the property to name of second tab .. eg. set tabOpt value to 'savedTab' in updateMLContainers method ?
4. In VF page add following attributes to <apex:tabPanel id="theTabPanel" value="{!tabOpt}" ...  
     you may also need to remove the selectedTab attribute, but I'm not sure about that.
5. In rerender statements, add "theTabpanel" to the list of components you wish to refresh.

Really can't guarantee this will work but hope this helps.
Anil Kumar DevarapuAnil Kumar Devarapu
#Thomas Fuller,
Sir,
How did you get that PopUp / LightBox.

share me Please,
cause i need something like this on my current project

anildevarapu@gmail.com