title: JSF 2 Update Component Outside of Form and Outside of Facelet
body: <p>I have a form in the &lt;ui:insert name="content" /&gt; 
  When I save the data with a p:commandButton I can update the form and things within the &lt;ui:insert name="content" /&gt;. But I am having trouble figuring out how to update components in the &lt;ui:include src="/sections/menus/topMenu.xhtml"/&gt;</p>
  
  <p>Inside the topmenu I have a subview for a panel with links that get rendered depending on whether a person is logged in or not. when they are logged in I show their username. If I update the user name in the content part of the template, I want to update the ui so that the name in the menu also updates without a page refresh. But that is a fallback I can use too. Refresh the page after update. But would rather not. I'll post more code if you want but trying to keep it to a minimum to start.</p>
  
  <pre><code>  &lt;h:body&gt;
      &lt;div id="wrap"&gt;
        &lt;div title="Container"&gt;
            &lt;ui:include src="/sections/base/header.xhtml"/&gt;
          &lt;/div&gt;&lt;!-- End of Banner --&gt;
  
          &lt;div id="baseTemplateTopMenu" title="Menu"&gt;
            &lt;ui:include src="/sections/menus/topMenu.xhtml"/&gt;
          &lt;/div&gt;&lt;!-- End of Menu --&gt;
  
          &lt;div id="sbt_contentbody"&gt; 
  
              &lt;div title="Left Column"&gt;
                &lt;ui:include src="/sections/base/leftsidebar.xhtml"/&gt;
              &lt;/div&gt; &lt;!-- End of Left Column --&gt;
              &lt;div title="Content Column"&gt;
                &lt;ui:insert name="content" /&gt;
              &lt;/div&gt;&lt;!-- End of Centre Column --&gt;
              &lt;div title="Right Column"&gt;
                &lt;ui:include src="/sections/base/rightsidebar.xhtml"/&gt;
              &lt;/div&gt;&lt;!-- End of Right Column --&gt;
  
          &lt;/div&gt;
          &lt;div id="footer" title="Footer" class ="container"&gt;
            &lt;ui:include src="/sections/base/footer.xhtml"/&gt;
          &lt;/div&gt;&lt;!-- End of Footer --&gt;
  
        &lt;/div&gt;&lt;!-- End of Container --&gt;
    &lt;/h:body&gt;
  </code></pre>
  
  <p>Below is the p:commandButton that saves the user info</p>
  
  <pre><code>&lt;p:commandButton id="id_SubmitUserInfoPrefs"
                      value="Update"
                      action="#{userPreferences.updateUserInfo()}" styleClass="bottom_margin_2em top_margin_2em"&gt;
      &lt;f:ajax execute="@form" render="@form :topMenuLoginView:topMenuLoginForm" /&gt;
  &lt;!-- tried adding 'update=":"topMenuLoginView:topMenuLoginForm"' as well. --&gt;
  </code></pre>
  
  <p></p>
  
  <p>Below is in the menu part of the template.</p>
  
  <pre><code>&lt;f:subview id="topMenuLoginView"&gt;
      &lt;h:form id="topMenuLoginForm" prependId="false"&gt;
          &lt;ul&gt;
              &lt;h:panelGroup id="loginPanel" rendered="#{!user.loggedIn}"&gt;
                  &lt;li&gt;&lt;h:outputLink value="javascript:void(0)" onclick="topMenuLoginDialog.show()" 
                                      title="login" styleClass="loginpanelclass"&gt;Log In&lt;/h:outputLink&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;h:link value="Register" outcome="/registration/register.xhtml" /&gt;&lt;/li&gt;
              &lt;/h:panelGroup&gt;
              &lt;h:panelGroup id="logoutPanel" rendered="#{user.loggedIn}"&gt;
                  &lt;li&gt;&lt;h:link value="#{user.nickname}" outcome="#{navigationprops.userprefs}" /&gt; &lt;/li&gt;
                  &lt;li&gt;&lt;p:commandLink action="#{webAuthenticationBean.logout}" 
                                      update=":topMenuLoginView:topMenuLoginForm"&gt;
                          Logout
                      &lt;/p:commandLink&gt;
                  &lt;/li&gt;
              &lt;/h:panelGroup&gt;
          &lt;/ul&gt;
      &lt;/h:form&gt;
  &lt;/f:subview&gt;
  </code></pre>