function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rohan SarafRohan Saraf 

how to rerender the pageblock table on click of a button

Hello Every one could any one please tell me how to rerender the table on the click of the command button ..!!

I tried to Make it happen by different methods but still when I dounle refresh the page the recent data  is displayed

Dushyant SonwarDushyant Sonwar
Hi Rohan ,

You can rerender the  pageblocktable  using actionFunction 
Below is an example how to rerender the section / Panel
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm

Please post your vf page and controller code to identify the issue.
Thanks,
Dushyant 
Rohan SarafRohan Saraf

Hii Dushyant...Thankx for the Reply....

yeah I will Post it ....
This is the Controller function i need to fire when click the button...

public List<Event_Detail__c> getEventDetails(){
        system.debug('inside');
        List<Event_Detail__c> activityList1 = [select Person_Name__c,ProductName1__c,HSN_SAC_Code__c,Quantity__c,Total_Price_with_Tax__c 
                     from Event_Detail__c where Related_Booking__c =: bookingId
                   ];
        system.debug('activityList1------------'+activityList1);
        return activityList1;
    }
This is the VF Page code I need to fire when click the button...
<apex:outputPanel id="bookrec">
                                    <apex:pageBlock >
                                        <apex:pageblocktable value="{!EventDetails}" var="fetch" id="mytable">                                        
                                            <apex:column value="{!fetch.Person_Name__c}"/>
                                            <apex:column value="{!fetch.ProductName1__c}"/>
                                            <apex:column value="{!fetch.Quantity__c}" />
                                            <apex:column value="{!fetch.Total_Price_with_Tax__c}" />
                                        </apex:pageblocktable>
                                    </apex:pageBlock>
                                </apex:outputPanel>
please See if it could help..!!

 
Dushyant SonwarDushyant Sonwar
You can create dummy ActionFunction for you to work as your Event Details is a getter so you don't need to call any server side method , rerendering will do the trick.
<apex:actionFunction name="refreshEvent" rerender="mytable" />

<apex:commandButton value="Your Button" onclick="refreshEvent();return false;" />

Hope this will help you.
Rohan SarafRohan Saraf
Hii Dushyant...
I tried that previously but it didn't Help me out....
I tried Many things like onclick, oncomplete etc...
Also i tried the HTML Button instead of the Command button but Still Not working...!!
Dushyant SonwarDushyant Sonwar
Could you post your whole full class and vf page code? As the dummy actionFunction should work fine in your scenario.
Rohan SarafRohan Saraf

Hii Dushyant Ya Sure...

Here Is my code

Controller:
 


public without sharing class ActivityBookingDemoNew
{
    public Boolean eventJump = false;
    public String pname{get;set;} 
    public Invoice_Line_Item__c ilist;
    
    public String DName {get;set;}
    public String DbookingDate {get;set;}
    public String DmobileNumber   {get;set;}
    public String DAge  {get;set;}
    public String DEmail  {get;set;} 
    public String DCountry   {get;set;}
    public String DCity   {get;set;}
    public String DGender   {get;set;} 
    public String DState  {get;set;}
    
	/*public list<Event_Detail__c> activityList1{
        get{
            activityList1 = [select Person_Name__c,ProductName1__c,Quantity__c,Total_Price_with_Tax__c 
                     from Event_Detail__c
                     where Related_Booking__c =: bookingId];
            return activityList1;
        }
        
        
        set;
    } */   
    
    Blob blobBookingId = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('bid'));
    public String bookingId = blobBookingId.toString();
    
    
    Blob blobName = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('nm'));
    public String name = blobName.toString();   
    
    Blob blobDate = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('dt'));
     
    public Date bookingDate = Date.valueOf(blobdate.toString());
    String bDate = String.valueOf(bookingDate);
    
    Blob blobNumber = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('mb'));
    public String mobileNumber = blobnumber.toString();
    
    Blob blobAge = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('ag'));
    public String age = blobAge.toString();
    
    Blob blobEmail = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('em'));
    public String email = blobEmail.toString();
    
    Blob blobCountry = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('cntr'));
    public String country = blobCountry.toString();
    
    Blob blobCity = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('ct'));
    public String City = blobCity.toString();
    
    Blob blobGender = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('gd'));
    public String gender = blobGender.toString();
    
    Blob blobState = EncodingUtil.base64Decode(ApexPages.currentPage().getParameters().get('st'));
    public String state = blobState.toString();
    
    public Event_Detail__c eventList{get;set;}
    
    List<String> eventDetailList = new List<String>();
    
    DateTime dt1 = Custombooking__c.getInstance().Block_Jump_Start_Date__c;
    DateTime dt2 = Custombooking__c.getInstance().Block_Jump_End_Date__c;
    Date blockJumpstartDate = date.newinstance(dt1.year(), dt1.month(), dt1.day());
    Date blockJumpendDate = date.newinstance(dt2.year(), dt2.month(), dt2.day());
    
    public Decimal totalElements{get;private set;}
    
    public ActivityBookingDemoNew(ApexPages.StandardController controller) {
        
        If(Test.isRunningTest()){
            system.debug('ApexPages.currentPage().getParameters():\n'+ApexPages.currentPage().getParameters());
        }
        eventList = new Event_Detail__c();
        Schema.DescribeFieldResult fieldResult = Event_Detail__c.Event__c.getDescribe();
        System.debug('Field Result:'+fieldResult);
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        totalElements=0;
        for(Schema.PicklistEntry r : ple){
            if(r.active){
                totalElements++;
                eventDetailList.add(r.getValue());
            }
            
        }
        
        searchResults = new List<categoryWrapper>();     
        
        Integer sequence = 1;
        for(String g : eventDetailList){

            if(bookingDate >= blockJumpstartDate && bookingDate <= blockJumpendDate){
                
                if(g=='Bungy Jump' && Custombooking__c.getInstance().Bungy_Jump__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Bungy_Jump_Amount__c.setScale(2),sequence ));
                }
                if(g=='Flying Fox' && Custombooking__c.getInstance().Flying_Fox__c==false)
                {
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Flying_Fox_Amount__c.setScale(2),sequence ));
                }
                if(g=='Giant Swing' && Custombooking__c.getInstance().Giant_Swing__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Giant_Swing_Amount__c.setScale(2),sequence ));
                }
                if(g=='Combo 1 - Bungy Jump + Flying Fox' && Custombooking__c.getInstance().Combo_1_Giant_Swing_Flying_Fox__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_1_Giant_Swing_Flying_Fox_Amt__c.setScale(2),sequence ));
                }
                if(g=='Combo 2 - Giant Swing + Flying Fox' && Custombooking__c.getInstance().Combo_2_Flying_Fox_Bungy_Jump__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_2_Flying_Fox_Bungy_Jump_Amount__c.setScale(2),sequence ));
                }
                if(g=='Combo 3 - Bungy Jump + Giant Swing' && Custombooking__c.getInstance().Combo_3_Bungy_Jump_Giant_Swing__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_3_Bungy_Jump_Giant_Swing_Amt__c.setScale(2),sequence ));
                }
                if(g=='Thrillogy Combo - Bungy + Giant + Flying' && Custombooking__c.getInstance().Trilogy_Combo_Bungy_Jump_Flying_Fox__c==false){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().TrilogyCombo_BungyJump_Flying_Fox_Amt__c.setScale(2),sequence ));
                }
            }         
            else{
                
                if(g=='Bungy Jump'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Bungy_Jump_Amount__c.setScale(2),sequence ));
                }
                if(g=='Flying Fox'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Flying_Fox_Amount__c.setScale(2),sequence ));
                }
                if(g=='Giant Swing'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Giant_Swing_Amount__c.setScale(2),sequence ));
                }
                if(g=='Combo 1 - Bungy Jump + Flying Fox'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_1_Giant_Swing_Flying_Fox_Amt__c.setScale(2),sequence ));
                }
                if(g=='Combo 2 - Giant Swing + Flying Fox'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_2_Flying_Fox_Bungy_Jump_Amount__c.setScale(2),sequence ));
                }
                if(g=='Combo 3 - Bungy Jump + Giant Swing'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().Combo_3_Bungy_Jump_Giant_Swing_Amt__c.setScale(2),sequence ));
                }
                if(g=='Thrillogy Combo - Bungy + Giant + Flying'){
                    searchResults.add(new categoryWrapper(false,g,eventList.No_of_Jumps__c,Custombooking__c.getInstance().TrilogyCombo_BungyJump_Flying_Fox_Amt__c.setScale(2),sequence ));
                }
            }
            sequence ++;
        } 
        setData();
    }
    
    public void setData()
    {        
        DName = blobName.toString();
        Datetime dt = Datetime.newInstance(bookingDate.year(), bookingDate.month(),bookingDate.day());
        DbookingDate = dt.format('MMMM d,  yyyy');
    }
    
    public PageReference eventJump(){   
        return null;
    }
    
    
    Map<String,Decimal> activityList =new Map<String,Decimal>();
    
    public List<String> selectP = new List<String>();
    
    public List<categoryWrapper> searchResults {get;set;}
    
    public List<Event_Detail__c> event = new List<Event_Detail__c>();
    
    //--------------------------------------------------------Added by shubham
    
    public String activityToAdd{get;set;}
    public String jumpCount{get;set;}
    public Integer jumps{get;set;}
    public boolean haveAdded{get;set;}
    public String activityToDelete{get;set;}
    //public boolean haveToBeAdded{get;set;}  //Commented after test, cause not used anywhere 
    public Integer count{get;set;}
    
    /* Added haveToBeAdded so as to render the add activity form 
* only if there exist other options in the select activity list other than 
* 'SELECT' option
*/
    
    //List generated after adding activity passed to eventSelected method for payment module purpose
    public LIST<categoryWrapper> Bookedactivities{get; private set;} 
    
    /* Method to return list of activity options that can be added for payment purpose  
    */
    public LIST<SelectOption> getActivities(){
        
        if(Bookedactivities == null){
            Bookedactivities = new LIST<categoryWrapper>();
        }
        system.debug('hello');
        List<SelectOption> options = new LIST<SelectOption>();
        options.add(new SelectOption('SELECT','SELECT'));
        for(categoryWrapper c: searchResults){
            if(c.cat == null || c.cat == 0){
                options.add(new SelectOption(c.listValue,c.listValue)); 
                //haveToBeAdded = true;
                //system.debug('have to be added - '+haveToBeAdded);
            }
        }
        if(options.size() == 1){
            //haveToBeAdded = false;
            //system.debug('have to be added - '+haveToBeAdded);
        }
        
        System.debug('options:'+options);        
        count=options.size();
        System.debug('searchResults:'+searchResults);
        return options;
    }
    
    public void removeActivityFromPayment(){
        
        List<CategoryWrapper> newList = new LIST<CategoryWrapper>();
        
        if(activityToDelete != null){
            for(categoryWrapper c: Bookedactivities){
                if(c.listValue == activityToDelete){ 
                    for(categoryWrapper searchObj: searchResults){
                        if(searchObj.listValue == c.listValue){
                            SearchObj.cat = null;
                        }
                    }
                }else{
                    newList.add(c);
                }
            }
            count--;
            bookedactivities.clear();
            Bookedactivities.addAll(newList);
            haveAdded = (Bookedactivities.isEmpty()?false:true);
            system.debug('delete:'+Bookedactivities);
        }
        
        getAddedActivities();
        getActivities();
    }    
    public List<categoryWrapper> getAddedActivities(){
        system.debug('Seq -:'+Bookedactivities);
        return Bookedactivities;        
    }
    
    public void addToActivityForPayment(){
        system.debug('\n activityToAdd: '+activityToAdd+'\nJumpCount: '+jumpCount);
        try{
            
            if(jumpCount != '')
            {                
                jumps = Integer.ValueOf(jumpCount);
                if(String.ValueOf(jumpCount).isNumeric() && Decimal.ValueOf(jumpCount)>0)
                {
                    for(categoryWrapper wrapProductObj : searchResults)
                    {
                        if(wrapProductObj.listValue == activityToAdd)
                        {
                            wrapProductObj.cat = jumps;
                            wrapProductObj.eventTotal = wrapProductObj.cat * wrapProductObj.eventAmount;
                            haveAdded = true;
                            Bookedactivities.add(wrapProductObj);
                            count--;
                            system.debug('Bookedactivities -'+Bookedactivities);
                        }
                    }              
                }
            }
            else
            {
                if(activityToAdd != 'SELECT')
                {
                    for(categoryWrapper wrapProductObj : searchResults)
                    {
                        if(wrapProductObj.listValue == activityToAdd)
                        {
                            wrapProductObj.cat = 1;
                            haveAdded = true;
                            wrapProductObj.eventTotal = wrapProductObj.cat * wrapProductObj.eventAmount;
                            Bookedactivities.add(wrapProductObj);                 
                            count--;
                            system.debug('catch Bookedactivities -'+Bookedactivities);
                        }
                    }                    
                }        
            }            
            
        }catch(Exception e){
            system.debug('ex -'+e.getMessage());
        }
    }
    //----------------------------------------------------------------------- End of shubham's code
    
    public PageReference eventSelected()
    {
        
        system.debug('***********The blockJumpendDate  is**********'+blockJumpendDate );
        //Bookedactivities was previously searchResults before adding shubham's code 
        for(categoryWrapper wrapProductObj : Bookedactivities)
        {
            
            //if(wrapProductObj.checked == true)   //to be commented for avoid checkbox
            // {              
            activityList.put(wrapProductObj.listValue,wrapProductObj.cat);
            // }
            
        }
        system.debug('Bookedactivities:'+Bookedactivities);
        system.debug('activityList:'+activityList);
        
        if(activityList.size()<1){
            return null;
        }
        else{
            eventJump = true;
            /* Commented this because we are already saving records on NEXT button.

Booking__c book = new Booking__c();
book.Name__c = name;
book.Book_Date__c = Date.ValueOf(bookingDate);
book.Moblie_Number__c = mobileNumber;
book.Age__c = Decimal.ValueOf(age);
book.Email__c = email;
book.Country_P__c = country;
book.City_P__c = city;
book.Gender__c = gender;
book.State_P__c = state;
book.Source__c = 'Online';       
book.RecordTypeId = Schema.SobjectType.Booking__c.getRecordTypeInfosByName().get('Activity Booking').getRecordTypeId();
insert book;

system.debug('book: '+book);
*/
            
            Map<String,String> m= new Map<String, String>();
            List<Product__c> product = [SELECT Product_Name__c,Id  FROM Product__c WHERE RecordType.Name = 'Activity Booking'];
            for(Product__c t : product){
                m.put(t.Product_Name__c,t.Id);
            }       
            
            system.debug('product: '+product);
            system.debug('bookingId -'+bookingId);
            Set<String> eventName = activityList.keySet();
            for(String eventDetail : eventName){
                //event.add(new Event_Detail__c(Related_Booking__c = book.Id,Product__c= m.get(eventDetail),Quantity__c = activityList.get(eventDetail)));
                event.add(new Event_Detail__c(Related_Booking__c = bookingId,Person_Name__c = pname,Product__c= m.get(eventDetail),Quantity__c = activityList.get(eventDetail)));
            }
            
            system.debug('event: '+event);
            
            if(event.size()>0){
                insert event;//verify to put update/Upsert instead of insert
            }
            
            
            //PageReference jumpBook = new PageReference('/apex/Booking_Thank_you_Page');
            //jumpBook.setRedirect(true);
            //return jumpBook;
            
            return null;
            
        } 
        
    }
    //-----------------------
  
    
    
    public PageReference bookDetail() {
        system.debug('++++++++++++++++++++++++++++++++++++++++++++++++++In Method');
        eventSelected();
        creatingInvoice();
        system.debug('++++++++++++++++++++++++++++++++++++++++++++++++++After Insert');
        if(eventJump == true){
            PageReference jumpBook = new PageReference('/apex/PaymentGateway');
            jumpBook.setRedirect(true);
            return jumpBook;
        }
        else{
            return null;
        }
    }
    
    public List<Event_Detail__c> getEventDetails(){
        system.debug('inside');
        List<Event_Detail__c> activityList1 = [select Person_Name__c,ProductName1__c,HSN_SAC_Code__c,Quantity__c,Total_Price_with_Tax__c 
                     from Event_Detail__c where Related_Booking__c =: bookingId
                   ];
        system.debug('activityList1------------'+activityList1);
        return activityList1;
    }
    
    
    public PageReference saveandnew() {
        
        system.debug('bookingId--->'+bookingId);
        Blob bookingIdBlob = Blob.valueOf(bookingId);
        String paramBookId=EncodingUtil.base64Encode(bookingIdBlob); 
        
        Blob nameBlob = Blob.valueOf(name);
        String paramName = EncodingUtil.base64Encode(nameBlob);
        
        Blob dateBlob = Blob.valueOf(bDate);
        String paramDate = EncodingUtil.base64Encode(dateBlob);
        
        Blob numberBlob = Blob.valueOf(mobileNumber);
        String paramNumber = EncodingUtil.base64Encode(numberBlob);
        
        Blob ageBlob = Blob.valueOf(age);
        String paramAge = EncodingUtil.base64Encode(ageBlob);
        
        Blob emailBlob = Blob.valueOf(Email);
        String paramEmail = EncodingUtil.base64Encode(emailBlob );
        
        Blob countryBlob = Blob.valueOf(Country);
        String paramCountry = EncodingUtil.base64Encode(countryBlob);
        
        String paramCity = '';
        if(City != null){
            Blob cityBlob = Blob.valueOf(City);
            paramCity = EncodingUtil.base64Encode(cityBlob);
        }
        
        Blob genderBlob = Blob.valueOf(Gender);
        String paramGender = EncodingUtil.base64Encode(genderBlob);
        
        String paramState = '';
        if(State != null){
            Blob stateBlob = Blob.valueOf(State);
            paramState = EncodingUtil.base64Encode(stateBlob);
        }
        
        //--------------------------------------
        
        
        //---------------------------------------
        system.debug('++++++++++++++++++++++++++++++++++++++++++++++++++In Method');
        eventSelected();
        getEventDetails();
        system.debug('++++++++++++++++++++++++++++++++++++++++++++++++++After Insert');
        if(eventJump == true){
            PageReference jumpBook = new PageReference('/apex/SelectActivitiesPage?bid='+paramBookId+'&nm='+paramName+'&dt='+paramDate+'&mb='+paramNumber+'&ag='+paramAge+'&em='+paramEmail+'&cntr='+paramCountry+'&ct='+paramCity+'&gd='+paramGender+'&st='+paramState);           
            jumpBook.setRedirect(true);
            return jumpBook;
       }
        else{
            return null;
        }
        
    }
    
    
    
    
    
    public PageReference back() {
        PageReference redirect  = new PageReference('/apex/BookingDetailsPage');
        redirect.getParameters().put('bid',bookingId);
        redirect.setRedirect(true);
        return redirect;
    }
    
    
    @TestVisible  public class CategoryWrapper {
        
        public Boolean checked{ get; set; }
        public String listValue{get;set;}
        public Decimal cat { get; set;}
        public Decimal eventAmount { get; set;}
        public Decimal eventTotal{get;set;}
        
        
        /* @TestVisible public CategoryWrapper(Boolean check, String listValue,Decimal eventList,Decimal Amount ){
this.cat = eventList;
this.eventAmount = Amount;
this.checked = check;
this.listValue= listValue;


}*/  
        
        public Integer sequence { get; private set; }
        public CategoryWrapper(Boolean check, String listValue,Decimal eventList,Decimal Amount,Integer sequence){
            this.cat = eventList;
            this.eventAmount = Amount;
            this.checked = check;
            this.listValue= listValue;            
            this.sequence = sequence ;
        }    
        
        
        
    }
    
}
Rohan SarafRohan Saraf
Here is my VF PAGE

<apex:page standardController="Event_Detail__c" extensions="ActivityBookingDemoNew" sidebar="false" showHeader="false" applyHtmlTag="false" standardStylesheets="false" applyBodyTag="false" docType="HTML-5.0">
    <apex:stylesheet value="{!$Resource.main}"/>
    <apex:form id="myform">
        <html lang="en">
            <head>
                <title>Select Activity</title>
                <apex:include pageName="BookingHeaderTags"/>
                <script>
                var totalElement = {!totalElements};//7
                var current_sequence = 0;
                
                function calculateTotal(element,amount,object)
                {                   
                    /*add 3 lines because 'element' value was getting missmatch*/
                    var currentCell = object.parentNode;
                    var currentRow=currentCell.closest('tr');
                    element=currentRow.rowIndex;
                    
                    document.getElementById('element_'+element).innerHTML =  0;
                    
                    if(isNaN(object.value))
                    {
                        alert('Please enter numeric data.'); 
                        object.value='';                   
                    } else 
                    {
                        document.getElementById('element_'+element).innerHTML = parseFloat((object.value)*amount).toFixed(2);
                    }
                    
                    var total = 0;                   
                    for(var i=1; i<= totalElement ;i++) 
                    {
                        if(document.getElementById('element_'+i) != null)
                        {
                            if(document.getElementById('element_'+i).innerHTML!= '') 
                            {
                                total += parseFloat(document.getElementById('element_'+i).innerHTML);
                            }       
                        }
                    }
                    document.getElementById('total').innerHTML = parseFloat(total).toFixed(2);
                }
                
                /* Add Activity Textbox validation*/          
                var specialKeys = new Array();
                specialKeys.push(8); //Backspace
                function IsNumeric(e) 
                {
                    //var keyCode = e.which ? e.which : e.keyCode
                    //var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);                    
                    // //document.getElementById("error").style.display = ret ? "none" : "inline";
                    //return ret;
                    
                    
                    
                    
                    var e = window.event || evt; 
                    if (e.charCode< 48 || e.charCode> 57)
                    {
                        return false;
                    }
                    return true;    
                }
                /* Table Textbox validation. */
                function IsNumericValue(e) 
                {
                    //var keyCode = e.which ? e.which : e.keyCode
                    //var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);                    
                    // //document.getElementById("error").style.display = ret ? "none" : "inline";
                    //return ret;
                    
                    
                    var e = window.event || evt; 
                    if (e.charCode< 48 || e.charCode> 57)
                    {
                        return false;
                    }
                    return true; 
                }
                function hideSelectList(count)
                {         
                    if(count == 1)
                    {   
                        var addActivityDiv=document.getElementById('addActivityDiv');
                        addActivityDiv.style.display='none';
                    }
                    else
                    {
                        var addActivityDiv=document.getElementById('addActivityDiv');
                        addActivityDiv.style.display='block';
                        return false;
                    }                    
                }
                function addRow()
                {
                    //var table = document.getElementById('j_id0:myform:listOfActivities');
                    var table = document.getElementById('{!$Component.myform.listOfActivities}');
                    if(table!=null)
                    {                        
                        var row = table.insertRow(table.rows.length);  
                        row.className  =  'footerrow';                     
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1); 
                        var cell3 = row.insertCell(2);
                        var cell4 = row.insertCell(3); 
                        var cell5 = row.insertCell(4);
                        cell1.innerHTML = '';
                        cell2.innerHTML = '';
                        cell3.innerHTML = '<span class="totalAmount">Total Booking Amount:</span>';
                        cell4.innerHTML = '<span id="total" class="totalAmount">0</span>';
                        cell5.innerHTML = '';
                        
                        loadTotalAmt(table);
                        //changeTableTextType(table);
                        
                    }    
                    //changeType();          
                }
                function loadTotalAmt(table)
                {
                    var total = 0;
                    var activityTotal=0;
                    
                    for(var i=1;i<table.rows.length-1;i++)
                    {                               
                        var noOFJumps = $(table.rows[i].cells[1]).find('input').val();
                        var jumpAmt = table.rows[i].cells[2].innerHTML;                            
                        
                        activityTotal = noOFJumps *  jumpAmt;                     
                        total += noOFJumps *  jumpAmt;                     
                        var cls=document.querySelectorAll('.eventTotalClass');
                        if(cls!=null)
                        {
                            cls[i-1].id = 'element_' + i;
                        }
                        document.getElementById('element_'+i).innerHTML =  parseFloat(activityTotal).toFixed(2);
                    }
                    document.getElementById('total').innerHTML = parseFloat(total).toFixed(2);
                }
                
                
                function showAddActivityDiv()
                {
                    //alert('hi');
                    /*var table = document.getElementById('{!$Component.myform.listOfActivities}');
                 if(table!=null)
                 {                        
                     for(var i=1;i<table.rows.length-1;i++)
                     {
                             
                     }
                 }*/
                  var addActivityDiv=document.getElementById('addActivityDiv');
                  addActivityDiv.style.display='block';
              }
            function changeType()
            {
                var type=document.getElementById('{!$Component.myform.jumpCount}');
                type.setAttribute("type", "number");                  
            }
            function changeTableTextType(table)
            {                  
                /*
                 var idd= document.getElementById('{!$Component.myform.eventjump}');
                 for(var i=1;i<table.rows.length-1;i++)
                 { 
                     var noOFJumps = $(table.rows[i].cells[1]).find('input').val();
                     alert(noOFJumps );
                 }*/                  
                  //if(typeNo!=null)
                  //   typeNo.setAttribute("type", "number");
              }
            
            </script>
        </head>
        <body class="bg">
            <!-- start About us -->
            <div class="container">
                <div> 
                    <apex:image value="{!$Resource.adv_zone}" alt="adv-zone" styleClass="img-responsive" />
                    <div class="whitebg">
                        <div>
                            <p class="title">BOOKED ACTIVITIES LIST
                                <apex:commandButton value="View Booked Activities" styleClass="paybtn" reRender="mytable" /> <!--orderP-->
                            </p>
                            
                            <div>
                                <apex:outputPanel id="bookrec">
                                    <apex:detail >
                                        <apex:pageBlock >
                                            <apex:pageblocktable value="{!EventDetails}" var="fetch" id="mytable">                                        
                                                <apex:column value="{!fetch.Person_Name__c}"/>
                                                <apex:column value="{!fetch.ProductName1__c}"/>
                                                <apex:column value="{!fetch.Quantity__c}" />
                                                <apex:column value="{!fetch.Total_Price_with_Tax__c}" />
                                            </apex:pageblocktable>
                                        </apex:pageBlock>
                                    </apex:detail>
                                </apex:outputPanel>
                            </div>
                        </div>
                        
                        <p class="title">SELECT ACTIVITIES</p>                    
                        <div class="margin-bottom-25 name-bookingdate">
                            <div class="col-sm-6" >
                                <p style="width:150px;display:inline-block;">
                                    <strong>Person Name :</strong></p>
                                <apex:inputText html-placeholder="Jumping Person Name" value="{!pname}" styleClass="text-box" />
                                
                            </div>
                            <div class="col-sm-6 booking-date">
                                <p><strong>Booking Date:</strong> {!DbookingDate} <!--Dec 27, 2016--></p>
                            </div>
                        </div>
                        <apex:outputPanel >
                            <div class="margin-bottom-25 form-horizontal select-activity-header" id="addActivityDiv">
                                <div class="col-sm-12 col-md-6 col-lg-6">
                                    <div class="form-group row">
                                        <label for="example-text-input" class="col-sm-4 control-label">Activity Name:</label>
                                        <div class="col-sm-8">
                                            <div class="select-style">
                                                
                                                <apex:selectList styleclass="form-control" id="activityList" multiselect="false" size="1" value="{!activityToAdd}">
                                                    <apex:selectOptions value="{!Activities}" />
                                                </apex:selectList>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div id="add" class="col-sm-12 col-md-6 col-lg-6" >
                                    <div class="form-group row">
                                        <label for="example-text-input" class="col-sm-5 control-label number-jumps">Number of Jumps:</label>
                                        <div class="col-sm-4">
                                            <!-- <input class="form-control" type="text" value="1" id="example-text-input" />-->
                                            <apex:inputText id="jumpCount" html-placeholder="1" value="{!jumpCount}" styleClass="form-control"  onkeypress="return IsNumeric(event);"/>
                                        </div>
                                        <div class="breckpoint"></div>
                                        <div class="col-sm-3 ">
                                            
                                            <apex:CommandButton id="addActivitytt" value="ADD +" action="{!addToActivityForPayment}"  reRender="activites,activityList" status="addActivity" oncomplete="hideSelectList({!count })" styleClass="addbtn">
                                                <!--ADD  <i class="fa fa-plus" aria-hidden="true"></i>-->
                                            </apex:CommandButton>                                         
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </apex:outputPanel>
                        <apex:actionStatus id="addActivity">
                            <apex:facet name="start">                                                              
                                <apex:image url="{!$Resource.loading}" title=" Please wait .."/>
                            </apex:facet>
                            <apex:facet name="stop">
                                <apex:outputPanel id="activites" >
                                    <apex:outputPanel rendered="{! haveAdded }" >
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <apex:dataTable headerClass="headrow" rowClasses=",grayrow" id="listOfActivities" value="{!AddedActivities}" var="c" styleClass="table activities-table tableborder">
                 
                                                    <apex:column headerValue="Activity Name" >
                                                        <apex:outputText value="{!c.listValue}" rendered="{! c.cat != null }" /> 
                                                    </apex:column>     
                                                    <apex:column headerValue="Number of Jumps" id="c3" >
                                                        <apex:inputText value="{!c.cat}" id="eventjump" rendered="{! c.cat != null }" styleClass="yourText" onblur="calculateTotal('{!c.sequence }',{!c.eventAmount},this)" onkeypress="return IsNumericValue(event);"/>
                                                        <!--<input type="text" value="{!c.cat.No_of_Jumps__c}" id="eventjump" styleClass="yourText" disabled="true"/>-->                                    
                                                    </apex:column>
                                                    <apex:column headerValue="Jump Amount" >
                                                        <apex:outputText value="{!c.eventAmount}" rendered="{! c.cat != null }" />
                                                    </apex:column>                                 
                                                    <apex:column headerValue="Total Amount">
                                                        <!-- Used CEILING for keeping consistency with javascript generated value -->
                                                        <!--<span id="element_{!c.sequence}" rendered="{! c.cat != null }">{!CEILING(c.eventTotal)}</span>-->
                                                        <span class="eventTotalClass" id="element_{!c.sequence}" rendered="{! c.cat != null }">{!c.eventTotal}</span>
                                                    </apex:column>                                
                                                    <apex:column >
                                                        <apex:commandLink action="{!removeActivityFromPayment}" reRender="activites,activityList" onclick="if(!confirm('Are you sure to remove the activity?')){return false;}else{showAddActivityDiv();}">
                                                            <apex:param name="activityName" value="{!c.listValue}" assignTo="{!activityToDelete}" />
                                                            <apex:image url="{!$Resource.DeleteIcon}"/>
                                                        </apex:commandLink>    
                                                    </apex:column>
                                                </apex:dataTable>
                                                <!--<table class="table activities-table">

                                            </div>
                                        </div>
                                    </apex:outputPanel> 
                                    <div class="col-md-12 marbot">
                                        <div class="text-right">
                                            <!--<button type="submit" class="themebtn"><i class="fa fa-chevron-left" aria-hidden="true"></i> BACK</button>-->
                                            <apex:commandLink value="BACK" action="{!back}" styleClass="themebtn">
                                                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                                            </apex:commandLink>
                                            <!--<button type="submit" class="paybtn">MAKE PAYMENT</button>-->
                                            <apex:commandButton rendered="{! haveAdded }" value="MAKE PAYMENT" action="{!bookDetail}" styleClass="paybtn" /> <!--orderP-->
                                            <!--ROhan Part-->
                                            <apex:commandButton rendered="{! haveAdded }" value="ADD MORE ACTIVITIES" action="{!saveandnew}" styleClass="paybtn" /> <!--orderP-->
                                            
                                        </div>
                                    </div>
                                    <script>
                                    addRow();
                                    </script>
                                </apex:outputPanel>
                            </apex:facet>
                        </apex:actionStatus>
                    </div>
                </div>
            </div>
            <!-- End About us -->
            <apex:include pageName="BookingFooter"/>
            <apex:includeScript value="{!$Resource.bootstrapJs}"/>
        </body>
        </html>
    </apex:form>
</apex:page>
Rohan SarafRohan Saraf

Hello Dushyant...

I wanted to apply the rerendering of the by clicking the Add more Activities...

But Since it is not getting done...

I created new button named view booked Activities....