I have VF page which contains dropdown ,an execute button and Refresh button and a table. Upon selecting a value in the dropdown and click on execute button, at the back end a method will execute and update a value custom object field.
Upon Clicking the Refresh button i want to display the update value in the table of VF page.I am able to update the table but whole page is getting loaded.
I want to refresh only the table component part not the dropdown when I click refresh button.
Can anyone please help me achieve this"
Link to post: http://community.salesforce.com/t5/Visualforce-Development/Update-the-table-Contents-using-Partial-page-update-concept/td-p/197375
I thought would make this the first post in my attempt to answer Salesforce.com Community Questions in-depth on my blog.
Document.getElementById().innerHTML == Rerender:
When I made the jump from S-Controls to Apex/Visualforce one of the tags I missed the most was JavaScript’s document.getElementById().innerHTML. I loved making a query to the API and then retendering an area of the screen with some new data. It was “AJAX…Web 2.0…cutting edge” and my clients loved it. While JavaScript still has a place in Apex/Visualforce making calls these kind of calls with partial page updates are now replaced with a nifty Apex tag attribute…rerender.
The "rerender" attribute can be specified on a CommandButton and CommandLink (maybe more…check the Visualforce guide). All you do is enter in an Id of an element on the screen that you would like rerendered once the method associated with that button/link is complete.
A quick example:
<apex:commandButton action="{!doSomething}" rerender="idToRerender" value="Rerender"/>
<apex:outputPanel id="idToRerender"> SOME DATA RETURNED BY THE CONTROLLER</apex:outputPanel>
When you click the button it will invoke the “doSomething” method and then rerender the outputPanel with any changes made by the “doSomething” method
A complete example:
Page:
Controller:<apex:page controller="rerenderTest"> <h1>Partial Page Refresh</h1> <apex:form >Put some text here: <apex:inputText value="{!showInRerender}" /><apex:commandButton action="{!doSomething}" rerender="idToRerender" value="Rerender"/></apex:form> <apex:outputPanel id="idToRerender">{!showInRerenderModified}</apex:outputPanel> </apex:page>
public with sharing class rerenderTest {
public String showInRerender {get;set;}
public String showInRerenderModified;
public String getShowInRerenderModified(){
return showInRerenderModified;
}
public void doSomething (){
showInRerenderModified = 'Here is what you just typed: ' + showInRerender;
}
}
You can call rerender on a number of Visualforce tags…again see the manual for a complete list. Hopefully this gives you a framework to answer your question and you can see how you could expand on this to include sObject updates, picklists, etc. to meet your specific use case.
Questions…comments…a better way to do it? I would love to hear from you!