function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
wenchun zgwenchun zg 

how to only refresh a page block in VF page by commandButton?

Is it possible to only refresh a page block(not the whole page) after click the commandButton?

I know we can use "rerender" to render a page block, but along with "rerender",  the whole page is refreshed. That is not i wanted.

I read the developer guide of VF, it describes commandButton as:
"The button executes an action defined by a controller, and then either refreshes the current page, or navigates to a different page based on the PageReference variable that is returned by the action."

It seems the "refresh" action must be happened once use commandButton.

Is there any away to avoid refreshing the whole page?
Best Answer chosen by wenchun zg
wenchun zgwenchun zg
all,

Finally I get this by using onClick event and apex:actionFunction conjunctly, the onclick has 'return false' defined:
<apex:commandButton value="Check" id="checkBtn" onclick="doUiCheck();return false;"/>
<apex:actionFunction name="actionDoCheck" action="{!doCheck}"  rerender="infoPanel"/>

Thanks

All Answers

Hargobind_SinghHargobind_Singh
Hi Wenchun, 

Rerender is supposed to refresh only a portion of a page, and is not supposed to refresh the whole page. Can you post your page and controller, or sample page and controller to see what is going wrong.. ? 
NBlasgenNBlasgen
Yeah, just make sure your rerender block is written correctly and it will make an AJAX request to rerender only that specific block.  The page won't fully refresh.  Just keep a good eye out for your blocks to see what's going on.  Also, it's sometimes a bit strange and you may need to put an extra container inside the block to make it work properly, but that doesn't sound like your issue.
wenchun zgwenchun zg
Hi all,

Thanks for the reply. I have the set the page block Id for the rerender action, below is the code snippet of page block:
<apex:outputPanel id="infoPanel" rendered="{!rerenderInfoBlock}">
         <apex:pageblockSection columns="1" id="infoSection" title="">
           <br/>
           <div>
            <span >info: there're {!num} records  found</span>
          
            <input type="button" style="float: right;" class="actionIngoreCreate button" value="Ignore all" onClick="createNew()"></input>
          
          </div>
          <br/>
         </apex:pageblockSection>
   </apex:outputPanel>
And my command button like:
<apex:commandButton value="Check" id="checkBtn" action="{!doCheck}"  rerender="infoPanel"/>

After reading your answers, I'm afraid I didn't describe my original problem clearly. I know after clicking the button, only the data of my "infoPanel" is updated. The data of other page blocks keep same as before the clicking. This is correct. "The whole page refresh", I mean the whole page "blinks" again, just like reloading. I captured a "blink" screenshot after clicking the button:
User-added image

My intention is to avoid the page "blink", just make the page-block blink. Is this possible?

(pls.let me if the description is confusion)

Thanks
Grazitti TeamGrazitti Team
Hi,
You can referesh your page by two ways.

1. In yourmethod docheck put pagereference code and give the same link.
2. Put oncomplete in your commandlink and reload the page in it like:

oncomplete="window.location.reload();"

Please mark it as best if this helps you.

Regards,
Grazitti Team
www.grazitti.com
wenchun zgwenchun zg
all,

Finally I get this by using onClick event and apex:actionFunction conjunctly, the onclick has 'return false' defined:
<apex:commandButton value="Check" id="checkBtn" onclick="doUiCheck();return false;"/>
<apex:actionFunction name="actionDoCheck" action="{!doCheck}"  rerender="infoPanel"/>

Thanks
This was selected as the best answer