title: Dynamic ajax navigation with <ui:include>
body: <p>Suppose I want to navigate in my application, and include different facelet pages dynamically. I have a commandLink like this:</p>
  
  <pre><code>&lt;h:commandLink value="Link" action="#{navigation.goTo('someTest')}"&gt;
      &lt;f:ajax render=":content" /&gt;
  &lt;/h:commandLink&gt;
  </code></pre>
  
  <p>And this is where I include the facelet:</p>
  
  <pre><code>&lt;h:form id="content"&gt;
      &lt;ui:include src="#{navigation.includePath}" /&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>The Navigation class:</p>
  
  <pre><code>public class Navigation {
      private String viewName;
  
      public void goTo(String viewName) {
          this.viewName = viewName;
      }
  
      public String getIncludePath() {
          return resolvePath(viewName);
      }
  }
  </code></pre>
  
  <p>I have seen similar examples, but this doesn't work of course. As <code>ui:include</code> is a taghandler,  the include happens long before my navigation listener is invoked. The old facelet is included, instead of the new. So far I get it.</p>
  
  <p>Now to the headache part: How can I dynamically include a facelet, based on an actionListener? I tried to include the facelet in a preRender event, and a phaseListener before RENDER_RESPONSE. Both work, but in the event listener I can't include a facelet which contains an other preRender event, and in the phaseListener I get duplicate Id's after some clicks in the included facelet. However, inspecting the component tree tells me, there are no duplicate components at all. Maybe these two ideas were not to good at all..</p>
  
  <p>I need a solution, where the page with the <code>ui:include</code>, or the Java class which includes the facelet, doesn't have to know the pages, which will be included, nor the exact path. Did anybody solve this problem before? How can I do it?</p>
  
  <hr>
  
  <p>I am using JSF 2.1 and Mojarra 2.1.15</p>
  
  <hr>
  
  <p>All you need to reproduce the Problem is this bean:</p>
  
  <pre><code>@Named
  public class Some implements Serializable {
      private static final long serialVersionUID = 1L;
      private final List&lt;String&gt; values = new ArrayList&lt;String&gt;();
  
      public Some() {
          values.add("test");
      }
  
      public void setInclude(String include) {
      }
      public List&lt;String&gt; getValues() {
          return values;
      }
  }
  </code></pre>
  
  <p>This in your index file:</p>
  
  <pre><code>&lt;h:head&gt;
      &lt;h:outputScript library="javax.faces" name="jsf.js" /&gt;
  &lt;/h:head&gt;
  
  &lt;h:body&gt;
      &lt;h:form id="topform"&gt;
          &lt;h:panelGroup id="container"&gt;
              &lt;my:include src="/test.xhtml" /&gt;
          &lt;/h:panelGroup&gt;
      &lt;/h:form&gt;
  &lt;/h:body&gt;
  </code></pre>
  
  <p>And this in text.xhtml</p>
  
  <pre><code>&lt;ui:repeat value="#{some.values}" var="val"&gt;
      &lt;h:commandLink value="#{val}" action="#{some.setInclude(val)}"&gt;
          &lt;f:ajax render=":topform:container" /&gt;
      &lt;/h:commandLink&gt;
  &lt;/ui:repeat&gt;
  </code></pre>
  
  <p>That's enough to produce an error like this:</p>
  
  <pre><code>javax.faces.FacesException: Cannot add the same component twice: topform:j_id-549384541_7e08d92c
  </code></pre>