Hi,

I have a visualforce page and a outputpanel on it. I need to render the page without refreshing the page. See below for the code.

Visualforce page:

<apex:page controller="SchedulerHomePageController">  
  <style>h3 { color: black; font-size: 16px; }</style>
  <apex:form >
   <apex:actionFunction name="send" action="{!renderAppointmentScreen}" reRender="none">
     <apex:param name="p1" assignto="{!expertId}" value=""/>
   </apex:actionFunction>
   
    <apex:outputpanel id="selectText">
      <apex:outputpanel rendered="{!disableExperts}" id="selectPub1">
      <h2><apex:outputText value="Name of the Service" escape="false"/></h2>
        <apex:selectRadio layout="pageDirection" value="{!selectedService}">
          <apex:selectOption itemValue="1" itemLabel="service 1<br/><div style='font-size: 14px; padding-left: 25px;'>Service description 1</div>" itemEscaped="false" />  
          <apex:selectOption itemValue="2" itemLabel="Service 2<br/><div style='font-size: 14px; padding-left: 25px;'>Service description 2</div>" itemEscaped="false" />
          <apex:selectOption itemValue="3" itemLabel="Service 3<br/><div style='font-size: 14px; padding-left: 25px;'>Service description 3</div>" itemEscaped="false" />
        </apex:selectRadio>
         <div align="center">
            <apex:commandLink styleClass="button" action="{!redirectToServiceType}" rerender="selectText,selectValues">
                <span><apex:outputText value="Submit" escape="false"/></span>
            </apex:commandLink>
      </apex:outputpanel>
      </apex:outputpanel>

      <apex:outputPanel id="selectValues">
       <apex:outputpanel rendered="{!enableExperts}" id="selectPub2">
        <div>
        <tr>
            <apex:repeat value="{!experts}" var="expert">
            <td>
                <p><apex:outputField value="{!expert.Image__c}" /></p>
                <apex:commandLink onclick="send('{!expert.Id}')" style="color:blue;text-decoration:underline" rerender="appScreen"><h4>{!expert.Name}</h4>
                </apex:commandLink>                
             </td><td width="100px"></td>
            </apex:repeat>
          </tr>
        </div>
       </apex:outputpanel>
       </apex:outputPanel>
       
      <apex:outputPanel id="appScreen">
       <apex:outputPanel rendered="{!enableAppScreen}">
        <h4> Appointment Screen </h4>
       </apex:outputPanel>
      </apex:outputPanel>
  </apex:form>
</apex:page>

Controller:

public without sharing class SchedulerHomePageController {
    public Theme__c theme {get;set;}
    public String selectedService {get;set;}
    public boolean enableExperts {get;set;}
    public boolean disableExperts {get;set;}
    public boolean enableAppScreen {get;set;}
    public String expertId {get;set;}
    public List<Experts__c> experts = new List<Experts__c>();
    
    public SchedulerHomePageController(){
            disableExperts = true;
            enableExperts = false;     
            enableAppScreen = false;
    }
        
    public string getselectedService(){
        return selectedService;
    }
            
    public List<Experts__c> getExperts() {
        List<ID> ExpertIds = ExpertUtils.getExpertIdsForUser(UserInfo.getUserId());
        
        if(selectedService == '1'){
            Experts =
              [SELECT
                Id,
                Name,
                Description__c,
                Expert_Bio__c,
                Image__c,
                Service_One__c,
                Service_Two__c,
                Service_Three__c,
                User__c
              FROM
                Experts__c
              WHERE
                is_active__c = true
              AND
                Service_One__c = true
              AND
                User__c in :Expertds
              ORDER By
                User__r.LastName];
        }
        
        if(selectedService == '2'){
           experts =
              [SELECT
                Id,
                Name,
                Description__c,
                Expert_Bio__c,
                Image__c,
                Service_One__c,
                Service_Two__c,
                Service_Three__c,
                User__c
              FROM
                Experts__c
              WHERE
                is_active__c = true
              AND
                Service_Two__c = true
              AND
                User__c in :ExpertIds
              ORDER By
                User__r.LastName];
        }
        
        if(selectedService == '3'){
            experts =
              [SELECT
                Id,
                Name,
                Description__c,
                Expert_Bio__c,
                Image__c,
                Service_One__c,
                Service_Two__c,
                Service_Three__c,
                User__c
              FROM
                Experts__c
              WHERE
                is_active__c = true
              AND
                Service_Three__c = true
              AND
                User__c in :ExpertIds
              ORDER By
                User__r.LastName];
        }
        return experts;
    }
    public void redirectToServiceType(){
        disableExperts = false;
        enableExperts = true;
        enableAppScreen = false;
    }
    
    public PageReference renderAppointmentScreen(){
        system.debug('expertId is ***:'+expertId);
        disableExperts = false;
        enableExperts = false;
        enableAppScreen = true;
        system.debug('enableAppScreen*****:::'+enableAppScreen);
        system.debug('disableExperts*****:::'+disableExperts);
        return null;
    }
}

The last outputpanel(<apex:outputPanel id="appScreen">) is not rendering. Can some one guide me what mistakes I am doing here?

Thanks.