[SalesForce] Uncaught ReferenceError: initViewstateTab is not defined. Debugging Visualforce Page/Controller

I'm attempting to build a visualforce page with the following functionality:

  • Dynamically generate 3 picklists, based on children of a given
    object's values.
  • Based on the values of the picklist, pull child record and display
    data in table.
  • If the values change, rerender the table and display new values.

  • Default marketplace should be "United States" if it's a found value and reporting period
    should be the most recent one.

I am relatively new to using the MVC concept, as well as apex,so I believe my main issue is coming from getting values passed between the view and controller, although it's likely there are more issues. Any help would be greatly appreciated, please feel free to tear into my code so I can learn the proper way!

Current Errors:

Uncaught ReferenceError: initViewstateTab is not defined VFDevMode.js:23

initContentFrame VFDevMode.js:23
onload vfpage?id=a02J000000CpLhj:26

Here's my visualforce page (with some edits):

   <apex:page standardController="Parent__c" extensions="ExtensionController">   
      <apex:form >
          <apex:pageBlock mode="maindetail">     
             <table width="100%" border="0">
                <tr>
                   <td width="500" valign="top">
                      <script type="text/javascript">
                         function doSearch(reporting, marketplace, ranktype) {
                             searchServer(
                                 reporting.value,
                                 marketplace.value,
                                 ranktype.value
                             );
                         }
                      </script> 

                      <apex:actionFunction name="searchServer" action="{!runQuery}" rerender="results, noresults, maindetail">
                         <apex:param name="reporting" value="" />
                         <apex:param name="marketplace" value="" />
                         <apex:param name="ranktype" value="" />
                      </apex:actionFunction>

                      <table cellpadding="5" cellspacing="5">
                         <tr>
                            <td style="font-weight:bold;">
                               Reporting Period<br/>
                               <apex:selectList id="reporting" value="{!defaultreportingperiod}" 
                               onchange="doSearch(
                               document.getElementById('{!$Component.reporting}'),
                               document.getElementById('{!$Component.marketplace}'),
                               document.getElementById('{!$Component.ranktype}')
                               );" 
                               size="1">
                                  <apex:selectOptions value="{!reporting}" />
                               </apex:selectList>
                            </td>
                            <td style="font-weight:bold;">
                               Marketplace<br/>
                               <apex:selectList id="marketplace" value="{!defaultmarketplace}" 
                               onchange="doSearch(
                               document.getElementById('{!$Component.reporting}'),
                               document.getElementById('{!$Component.marketplace}'),
                               document.getElementById('{!$Component.ranktype}')
                               );" 
                               size="1">
                                   <apex:selectOptions value="{!marketplace}" />
                               </apex:selectList>
                            </td>
                            <td style="font-weight:bold;">
                               Rank Type<br/>
                               <apex:selectList id="ranktype" value="{!defaultrankType}"
                               onchange="doSearch(
                               document.getElementById('{!$Component.reporting}'),
                               document.getElementById('{!$Component.marketplace}'),
                               document.getElementById('{!$Component.ranktype}')
                               );"  
                               size="1">
                                  <apex:selectOptions value="{!ranktype}" />
                               </apex:selectList>
                            </td>
                         </tr>
                      </table>
                   </td>
                </tr>
             </table>
             <apex:pageBlockSection id="noresults" rendered="{!!data}">
                 <h1>No Data to display.</h1>
             </apex:pageBlockSection>
             <apex:pageBlockSection id="results" rendered="{!data}">
                 <table width="40%" border="1" id="free" style="margin-bottom:20px">
                    <tr>
                       <th>Object</th>
                       <td>{!downloads}</td>
                    </tr>
                 </table>
            </apex:pageBlockSection>   
        </apex:pageBlock> 
    </apex:form>
</apex:page>

Here's my controller page (with some edits):

    public without sharing class ExtensionController{

    //SOQL Query to be run
    private String soql {get;set;}
    public List<ChildObject__c> data {get;set;}
    private double downloads {get;set;}
    private ID currentID {get;set;}

    //Visualforce control
    public boolean dataBool {get;set;}

    //Picklist Defaults
    public string defaultMarketplace {get;set;}
    public string defaultReportingPeriod {get;set;}
    public string defaultRankType {get;set;}

    //Fields to display
    public double downloads {get;set;}

    private final Parent__c parent;

    public List<SelectOption> marketplace {
        get {
            if (marketplace == null) {
                marketplace = new List<SelectOption>();
                AggregateResult[] ar = [SELECT marketplace__c FROM ChildObject__c WHERE marketplace__c != null AND Parent__c =: currentID GROUP BY marketplace__c ORDER BY marketplace__c asc];

                if (ar.size() == 0) {
                    marketplace.add(new SelectOption('----', '----'));
                } else {
                    for (AggregateResult a : ar) {
                        marketplace.add(new SelectOption((String)a.get('marketplace__c'), (String)a.get('marketplace__c')));
                        if ((String)a.get('marketplace__c') == 'United States') {
                            defaultMarketplace = 'United States';
                        } 
                    }

                    if (defaultMarketplace == '' || defaultMarketplace == null) {
                        defaultMarketplace = (String)ar[0].get('' + 'marketplace__c');
                    }
                }
            }
            return marketplace;
        }
        set;
    }

    public List<SelectOption> reporting {
       get {
           if (reporting == null) {

                reporting = new List<SelectOption>();
                AggregateResult[] ar = [SELECT reporting_period__c FROM ChildObject__c WHERE reporting_period__c != null AND Parent__c =: currentID GROUP BY reporting_period__c ORDER BY reporting_period__C desc];
                if (ar.size () == 0) {
                    reporting.add(new SelectOption('----', '----'));
                } else {

                    defaultReportingPeriod = (String)ar[0].get('' + 'reporting_period__c');

                    for (AggregateResult a : ar)
                        reporting.add(new SelectOption((String)a.get('reporting_period__c'), + (String)a.get('reporting_period__c')));
                }
            }
            return reporting;
        }
        set;
    }

    public List<SelectOption> ranktype {
        get {
            if (ranktype == null) {

                ranktype = new List<SelectOption>();
                AggregateResult[] ar = [SELECT rank_type__c FROM ChildObject__c WHERE rank_type__c != null AND Parent__c =: currentID GROUP BY rank_type__c ORDER BY rank_type__c desc];
                if (ar.size () == 0) {
                    ranktype.add(new SelectOption('----', '----'));
                } else {

                    defaultranktype = (String)ar[0].get('' + 'rank_type__c');

                    for (AggregateResult a : ar)
                        ranktype.add(new SelectOption((String)a.get('rank_type__c'), + (String)a.get('rank_type__c')));
                }
            }
            return ranktype;  
        }
        set;
    }

    // Initializes the standard controller, and displays united states dataBool for max period if exists
    public ExtensionController(ApexPages.StandardController stdController) {      
        this.parent = (Parent__c)stdController.getRecord();
        currentID = System.currentPageReference().getParameters().get('id'); 
        runSearch();   
    }

    // runs the actual query
    public void runQuery() {
        dataBool = true;
        String reporting = Apexpages.currentPage().getParameters().get('reporting');
        String marketplace = Apexpages.currentPage().getParameters().get('marketplace');
        String rankType = Apexpages.currentPage().getParameters().get('ranktype');

        if (reporting == null || marketplace == null || rankType == null) {
            dataBool = false;
        } else {
            data = [SELECT downloads 
                            FROM ChildObject__c 
                            WHERE 
                                Parent__c =: currentID 
                                AND marketplace__c =: marketplace 
                                AND reporting_period__c =: reporting 
                                AND Rank_Type__c =: ranktype];
        }

        if (data != null && data.size() != 0) {
            downloads = (Double)data[0].downloads__c;  
            dataBool = true;
        } else {
            dataBool = false;
        }
    }    

    // runs the search with parameters passed via Javascript
    public PageReference runSearch() {
        runQuery();        
        return null;
    }
}

Best Answer

I can reproduce a "Uncaught ReferenceError: initViewstateTab is not defined" appearing in the JavaScript console as described here Getting Javascript error while creating a Visual force page. So that appears to be an error in the platform's "Development Mode" JavaScript which can be eliminated by turning that mode off. (I do not think the error has any practical impact on your page's JavaScript logic but am not certain.)

When you have eliminated that, you may well have to do further debugging. You can check the requests from the browser using your browser's "Developer Tools" and add System.debug calls in your controller and examine the debug logs on the server-side.