Uncaught ReferenceError: Ext is not defined , Uncaught ReferenceError: chatter is not defined

Question

I have used Chatter Feed component on my visualforce page . Example : The problem is that sometimes the chatter feed is loading and working completely fine while sometimes it shows the below JS error :

Uncaught ReferenceError: Ext is not defined

Uncaught ReferenceError: chatter is not defined

and therefore feed is loading but nothing in the feed is working properly like comment / Like / File etc.

I don't understand why it is happening sometimes and not every time ... and how to get it resolved so that the problem never occurs.

Extension :

global with sharing class Market_View {

Public String businessGroupId {get;set;}
Public String businessUnitId {get;set;}

Public Id temp {get;set;}

Public void SetCurrentIdValue(){
    String CurrentId ;
    if(businessGroupId != Null ){
        If(businessUnitId !=Null){
            CurrentId = businessUnitId ;
        }
        else{
            CurrentId = businessGroupId ; 
        } 
     }
    else{
        CurrentId = '';
    }
    system.debug('>>>>>>>>'+ CurrentId  );
    system.debug('>>>>>>>>' + businessUnitId + '>>>>>>>>' + businessGroupId );        
    if(CurrentId != '')
        temp = (Id)CurrentId;
    else
        temp = Null;
   }


public Market_View(ApexPages.StandardController stdController) {
    temp  = Null;
    }

public List<SelectOption> getBusinessGroupList() {
    List<SelectOption> businessGroupList= new List<SelectOption>();
    businessGroupList.add(new SelectOption('', '--None--'));        
    List<Segmentation__c> lstSegmentation = [select id ,Name from Segmentation__c where Segmetation_Type_NG__c = 'Business Group']
    for (Segmentation__c s: lstSegmentation ) {
        businessGroupList.add(new SelectOption(s.Id, s.Name));
    }
    return businessGroupList;
}

public List<SelectOption> getBusinessUnitList() {
    List<SelectOption> businessUnitList= new List<SelectOption>();
    businessUnitList.add(new SelectOption('', '--None--'));

    if(businessGroupId != ''){
        List<Segmentation__c> lstSegmentation = [select id ,Name from Segmentation__c 
                                                 where Segmetation_Type_NG__c = 'Business Unit'
                                                 AND Parent__c = :businessGroupId ];

        for (Segmentation__c s: lstSegmentation ) {
            businessUnitList.add(new SelectOption(s.Id, s.Name));
        }
    }
    return businessUnitList;
}    
}

VF Page :

<apex:page StandardController="Segmentation__c" extensions="Market_View" title="Market View" tabStyle="Segmentation__c" sidebar="false" showHeader="false">

   <apex:form id="form">
        <apex:pageBlock title="Market View">
            <apex:pageBlockSection title="Market Selection">            
                <apex:pageBlockSectionItem >
                    <apex:outputLabel for="Business_Group" value="Business Group" />
                        <apex:selectList value="{!businessGroupId}" title="Business Group" size="1" id="Business_Group">
                            <apex:selectOptions value="{!BusinessGroupList}" />
                            <apex:actionSupport event="onchange" status="goStatus" action="{!SetCurrentIdValue}" rerender="Business_Unit,chatterFeed" />
                        </apex:selectList>
                </apex:pageBlockSectionItem>                
                <apex:pageBlockSectionItem >
                    <apex:outputLabel for="Business_Unit" value="Business Unit" />
                        <apex:selectList value="{!businessUnitId}" title="Business Unit" size="1" id="Business_Unit">
                            <apex:selectOptions value="{!BusinessUnitList}" />
                            <apex:actionSupport event="onchange" status="goStatus" action="{!SetCurrentIdValue}" rerender="chatterFeed" />
                        </apex:selectList>
                </apex:pageBlockSectionItem>                
            <apex:actionstatus id="goStatus">
               <apex:facet name="start">
                   <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
                         height: 100%;opacity:0.65;width:100%;"> 
                      <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                          <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                          <span class="waitingDescription">Please Wait...</span>
                      </div>
                  </div>
                 </apex:facet>
              </apex:actionstatus>                                 
            </apex:pageBlockSection>            
        </apex:pageBlock>
    </apex:form>

    <apex:outputPanel id="chatterFeed" layout="block" >
       <apex:pageBlock rendered="{!IF(temp!=null , true, false)}">
             <apex:pageblockSection title="Market Collaboration" >
                <apex:pageBlockSectionItem >
                    <chatter:feed entityId="{!temp}"/>
                </apex:pageBlockSectionItem>
            </apex:pageblockSection>                       
</apex:pageBlock>
    </apex:outputPanel>

</apex:page>

Answer 1

The solution for this is not to use ReRender for reRendering the chatter feed component .Looks like by doing Ajax call some of the bindings that are needed for chatter component is lost .

If reRender is need from User perspective ,either use Oncomplete and restore all the bindings or every time reload the page .You will need to use inspect element and figure all the functions thats missing and use oncomplete and reload these functions .