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
Sumaiya vhora 8Sumaiya vhora 8 

How to rereder or refresh custom componenets when click on radio button in vfpage

Ray KaushikRay Kaushik
I assume you are using an action function etc. Just add id of the components that you want to rerender in action function / command button rerender attribute that will be all
Sumaiya vhora 8Sumaiya vhora 8
<script>
function changeValue(input, textid) {
    document.getElementById(textid).value = input.value;
}   
</script>
<script>
function onCompleteHandler() {
      location.reload();

}
</script>
//-----------------------------
<apex:pageBlock title="List Of Contacts" >       
     <apex:pageBlockSection columns="1">
       <apex:pageBlockTable value="{!cont}" var="b">
      
         <apex:column >
   
              <input type="radio" name="chosen" id="{!b.id}" VALUE="{!b.id}" onclick="changeValue(this,'{!$Component.RadioButtonValue}');"  >
                   <apex:actionSupport event="onclick" action="{!callcont}" rerender="cpBlock" oncomplete="onCompleteHandler();">
                   <apex:param name="id" value="{!b.id}" /></apex:actionSupport>
                   
              </input>
         
         </apex:column>
            <apex:column ><apex:facet name="header">Name</apex:facet><apex:outputText value="{!b.name}" styleclass="tableStyle "/></apex:column>
         <apex:column ><apex:facet name="header">Email</apex:facet><apex:outputLink value="/{!b.email}" target="_blank" styleclass="tableStyle ">{!b.EMAIL}</apex:outputLink></apex:column> 
        <apex:column ><apex:facet name="header">Phone</apex:facet><apex:outputText value="{!b.Phone}" styleclass="tableStyle "/></apex:column>
      
       </apex:pageBlockTable>
Sumaiya vhora 8Sumaiya vhora 8
i want to, when click on radio button change or rerender pageblock using javascript. 
Sumaiya vhora 8Sumaiya vhora 8
<apex:page sidebar="false" standardController="Contact"  extensions="TestAccountDetails">
 <style>
body .pbBody table.list tr.headerRow td, body .pbBody table.list tr.headerRow th{    color: #4A4A56;
    font-size: 91%;
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;}
    
    tr {
    height: 30px !important;
}
.apexp .detailList .list td, .apexp .detailList .list th, .apexp .editPage .bPageBlock .detailList .list tr td, .apexp .editPage .bPageBlock .detailList .list tr th{padding: 0 !important;
color: #333;
border-bottom: 1px solid #E3DEB8;}


apexp .detailList .list td {padding: 0 !important;
color: #333;
border-bottom: 1px solid #E3DEB8;}
.inlineEditDiv input:focus, .inlineEditDiv select:focus{outline:0}
 .inlineEditDiv input[type="checkbox"]{ width:auto !important;}
 label{font-size:91% !important; color:#4a4a56; font-family:Arial,Helvetica,sans-serif}
    .inlineEditDiv input, .inlineEditDiv select{width:60% !important; text-align:right !important}
     .tableStyle {border-collapse: collapse; border-spacing: 0px 0px; }
     .labelCol { width:5% !important}
     .bPageBlock .labelCol{text-align:left}
     .bPageBlock .detailList .dataCol {width: 7% !important;}
</style>
<script>
function changeValue(input, textid) {
   document.getElementById(textid).value = input.value;
 }   
</script>
<script type="text/javascript">
function onCompleteHandler() {
 //location.reload();
}
</script>

<apex:form id="myform">

<apex:actionFunction name="rerenderTopPanel" rerender="" />
<!-- mode="inlineEdit" -->
<apex:pageBlock title="Account Contact Details" id="theblock">
  <apex:pageBlockSection columns="1">
            <apex:inputField value="{!contact.accountId}">
            </apex:inputField>
         </apex:pageBlockSection>
  </apex:pageBlock>
          
  <apex:pageBlock title="List Of Contacts" id="iii" >       
     <apex:pageBlockSection columns="1" >
       <apex:pageBlockTable value="{!cont}" var="b">
      
         <apex:column >
   
              <input type="radio" name="chosen" id="{!b.id}" VALUE="{!b.id}" onclick="changeValue(this,'{!$Component.RadioButtonValue}');"  >
                   <apex:actionSupport event="onclick" action="{!callcont}" rerender="cpBlock" oncomplete="onCompleteHandler();">
                   <apex:param name="id" value="{!b.id}" /></apex:actionSupport>
              </input>
         
         </apex:column>
            <apex:column ><apex:facet name="header">Name</apex:facet><apex:outputText value="{!b.name}" styleclass="tableStyle "/></apex:column>
         <apex:column ><apex:facet name="header">Email</apex:facet><apex:outputLink value="/{!b.email}" target="_blank" styleclass="tableStyle ">{!b.EMAIL}</apex:outputLink></apex:column> 
        <apex:column ><apex:facet name="header">Phone</apex:facet><apex:outputText value="{!b.Phone}" styleclass="tableStyle "/></apex:column>
      
       </apex:pageBlockTable> 
<apex:inputHidden value="{!contactId}" id="RadioButtonValue" />
    </apex:pageBlockSection>
  
   <apex:pageBlockSection columns="1" id="cpBlock">
  <c:Tabpanel id="theTabPanel" theme="start">
  
  <c:Tab title="Email" id="email" >
     <apex:pageBlockSection columns="1" rendered="{!entry}">
    
    <apex:outputPanel id="thePanel">
    <c:Contact_Details_Component aParentRecId="{!MyRecId}" asObjectType="{!MysObj}" aFieldList="{!MyFieldList}"
         aRelationField="{!MyRelationField}" aLabelOverrideFieldList="{!MyLabelOverrideFieldList}"
         aLabelOverrideTextList="{!MyLabelOverrideTextList}" aDefaultValueFieldList="{!MyDefaultValueFieldList}" 
         aDefaultValueTextList="{!MyDefaultValueTextList}" aBlockTitle="{!MyBlockTitle}" aAllowAdd="{!MyAllowAdd}"
         aAllowEdit="{!MyAllowEdit}" aAllowDelete="{!MyAllowDelete}"   id="componentss" />
   </apex:outputPanel> 
     
   
            </apex:pageBlockSection>
    </c:Tab>

    
 
 
    </c:Tabpanel>

   </apex:pageBlockSection>
 
 </apex:pageBlock>
 
 </apex:form>

</apex:page>
Sumaiya vhora 8Sumaiya vhora 8
when i click  first time on radio button it's work properly but when i click on anther radio button it cannot work but it display previous id data. how can i refresh custom componenets when click on radio button any one help?