Visualforce w/ Custom Controller Not Behaving as Expected

Question

I am trying to create a VisualForce page, with a custom controller, that displays the feed items from the chatter feed of the record provided by the user.

The goal is to have the page start with just an input field (to take a Record Id) and a button to 'Filter Feeds'. The rest of the page should not render b/c, at this point, the filtRecs variable should be == null. I would like a user to be able to input a record Id, click 'Filter Feeds', and have the outputPanel reRender, displaying the feed. The feed displays correctly when I hard-code a record Id into the controller, I am just having trouble with the passing of the value from the VisualForce inputText field to the apex controller.

Here's the code I have so far:

The VisualForce:

<apex:page controller="DemoController" id="democontroller" sidebar="true" showHeader="true" standardStylesheets="true" >
<div id="feed-filters" style="border:1px solid black;margin-bottom: 20px;">
<h4 style="padding-left:10px">Feed Filters</h4>
<apex:form style="padding:0px 0px 10px;">
    <apex:outputLabel value="Record Id:" style="padding-left: 10px;"/>
    <apex:inputText id="filtRecs" value="{!filtRecs}"/>

    <apex:commandButton reRender="feed-display-panel" value="Filter Feed" />
</apex:form>
</div>

<apex:outputPanel id="feed-display-panel" rendered="{!filtRecs != null}" >
  <div id="feed-display-div">
    <apex:repeat value="{!newsFeedForDisplay}" var="feedItemInfo">
      <div class="row" style="margin-bottom:5px;">
        <div>     
         <div style="display:inline-block;vertical-align:top;">
          <apex:image style="margin:4px;" width="25" url="{!feedItemInfo.feedItem.photoUrl}"/>
         </div>

       <div style="display:inline-block;vertical-align:top;width:350px;">
       <b>{!feedItemInfo.userName}</b><br/>
       <apex:outputText value="{!feedItemInfo.formattedText}" escape="false"/>

       <apex:outputPanel layout="block" rendered="{!IF(feedItemInfo.linkUrl == null, false, true)}" >              
         <b><a href="{!feedItemInfo.linkUrl}">{!feedItemInfo.linkTitle}</a></b>             
       </apex:outputPanel>
     </div>

     <apex:outputPanel layout="block" rendered="{!IF(feedItemInfo.contentDownloadUrl != null && feedItemInfo.imageUrl != null && feedItemInfo.hasImagePreview, true, false)}" >          
       <apex:image style="margin:4px" width="90" url="{!feedItemInfo.imageUrl}"/>
       <a href="{!feedItemInfo.contentDownLoadUrl}">{!feedItemInfo.contentTitle }</a>                 
     </apex:outputPanel>
   </div>

   <apex:outputPanel rendered="{!IF(feedItemInfo.commentCount > 0, true, false)}">
     <div style="width:85%;padding:4px;font-size:0.95em;position:relative;left:3em;" >
       <apex:repeat value="{!feedItemInfo.comments}" var="commentInfo">
         <div style="margin:4px;padding:4px;width:100%;">
           <div style="display:inline-block;vertical-align:top;">
             <apex:image style="margin:4px" width="25" url="{!commentInfo.comment.user.photo.smallPhotoUrl}"/>
           </div>

           <div style="display:inline-block;vertical-align:top;width:250px">
             <b>{!commentInfo.userName}</b><br/>
             <apex:outputText value="{!commentInfo.formattedText}" escape="false"/>
           </div>

           <apex:outputPanel rendered="{!IF(commentInfo.imageUrl == null, false, true)}" >
             <div style="display:inline-block;vertical-align:top;float:right;position:relative;right:1em" >
               <apex:image style="margin:4px" width="100" url="{!commentInfo.imageUrl}"/>
             </div>

             <div style="clear: both;"/>
           </apex:outputPanel>
         </div>
       </apex:repeat>
     </div>
   </apex:outputPanel>
 </div>

The Controller:

global class DemoController {
public String filtRecs {get; set;}

// get first page of news feed
global ConnectApi.FeedItemPage getNewsFeed() {
    return ConnectApi.ChatterFeeds.getFeedItemsFromFeed(null, ConnectApi.FeedType.Record, filtRecs);
}

// build list of wrapped feed items for display in VisualForce
global List<FeedItemInfo> getNewsFeedForDisplay() {
    ConnectApi.FeedItemPage feed = getNewsFeed();      
    List<FeedItemInfo> result = new List<FeedItemInfo>();
    for (ConnectApi.FeedItem item : feed.items) {
        result.add(new FeedItemInfo(item));
    }

    return result;
}
}

If anyone has a different/better way to do this, while I appreciate the advice, my primary goal here is to learn the basic skills, so I would like to take this step by step. That being said, this does use helper-classes to format the feedItems, which can be found here. Thanks in advance for any help/guidance that you can offer!

Answer 1

<apex:outputPanel id="feed-display-panel" rendered="{!filtRecs != null}" >

is not rendered when the page loads, because filtRecs is null

You cannot reRender something that didn't render at page load. Here's that blog post I mentioned in my previous reply, which explains this quite well.

So on button click reRender a parent container, so move the rendered to the apex:repeat and reRender the outputPanel

<apex:outputPanel id="feed-display-panel" >
  <div id="feed-display-div">
    <apex:repeat value="{!newsFeedForDisplay}" rendered="{!filtRecs != null}"  var="feedItemInfo">