Reloading div using Ajax

Question

I have found this topic, where's a bit of code to reload a div using Ajax. I've tried creating such example, but not successfully.

Here's my code:

• index.xhtml
  
  

          <h:form>
              <f:ajax render=":content">
                  <h:commandButton value="News" action="#{navigationBean.requestPage}">
                      <f:param name="requestedPage" value="news.xhtml"/>
                  </h:commandButton>
              </f:ajax>
              <br/><br/>
              <f:ajax render=":content">
                  <h:commandButton value="News" action="#{navigationBean.requestPage}">
                      <f:param name="requestedPage" value="games.xhtml"/>
                  </h:commandButton>
              </f:ajax>
          </h:form>
  
      </h:panelGroup>
  
      <h:panelGroup id="content" layout="block">
          <ui:include src="#{navigationBean.viewedPage}"/>
      </h:panelGroup>
  

• backing bean

  @ManagedBean
  @ViewScoped
  public class NavigationBean
  {
      private String viewedPage;
  
      public NavigationBean()
      {
          viewedPage = "news.xhtml";
      }
  
      public String getViewedPage()
      {
          return viewedPage;
      }
  
      public void setViewedPage(String viewedPage)
      {
          this.viewedPage = viewedPage;
      }
  
      public void requestPage()
      {
          Map<String,String> map = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
          viewedPage = map.get("requestedPage");
      }
  }
  

• how it looks:

So what am I missing? Variable viewedPage is updated, normal labels/texts etc. are updated, but can't get this div working.

Answer 1

Found the solution:

<h:commandButton value="Games" action="#{navigationBean.requestPage}">
    <f:param name="requestedPage" value="games.xhtml"/>
    <f:ajax execute="@this" render="@none" />
    <f:ajax render=":content"/>
</h:commandButton>

plus changing @ViewScoped to @SessionScoped.