title: Primefaces TabMenu in JSF page
body: <p>I'm working on JSF page which is using Primefaces <a href="http://www.primefaces.org/showcase-labs/ui/tabMenuDemos.jsf" rel="nofollow noreferrer">TabMenu</a>. I managed to find one possible solution of this <a href="https://stackoverflow.com/questions/12545319/tabs-in-jsf-page-are-not-working">post</a>. This is the solution so far:</p>
  
  <p>Main page:</p>
  
  <pre><code>&lt;div id="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px"&gt;
  
      &lt;p:tabMenu id="tabs" activeIndex="0" &gt;  
          &lt;p:menuitem value="General" url="/DCProfileTabGeneral.jsf" /&gt;  
          &lt;p:menuitem value="Zones" url="/DCProfileTabZones.jsf" /&gt;  
          &lt;p:menuitem value="UPS" url="/DCProfileTabUPS.jsf" /&gt;  
  
      &lt;/p:tabMenu&gt;  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JSF page from tabs:</p>
  
  <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core"&gt;
      &lt;h:head&gt;
  
      &lt;/h:head&gt;
      &lt;h:body&gt;
          &lt;ui:composition&gt;
              &lt;h:panelGroup&gt;
                  &lt;h:form id="zones" &gt;
                      &lt;!-- The sortable data table --&gt;
                      .................
  
                      &lt;!-- The paging buttons --&gt;
                      &lt;h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
                                       disabled="#{DCProfileTabZonesController.firstRow == 0}" &gt;
                          &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt;
                      &lt;/h:commandButton&gt;&amp;nbsp;
  
                      ....................
  
                      &lt;!-- Set rows per page --&gt;
                      &lt;h:selectOneMenu id="setrows" value="#{DCProfileTabZonesController.rowsPerPage}" converter="javax.faces.Integer" maxlength="2"&gt;                                    
                          &lt;f:selectItem itemValue="5" itemLabel="5" /&gt;
                          &lt;f:selectItem itemValue="10" itemLabel="10" /&gt;
                          &lt;f:selectItem itemValue="20" itemLabel="20" /&gt;
                          &lt;f:selectItem itemValue="50" itemLabel="50" /&gt;
                          &lt;f:selectItem itemValue="100" itemLabel="100" /&gt;     
                          &lt;f:selectItem itemValue="200" itemLabel="200" /&gt;
                          &lt;f:ajax render="@form" event="change" execute="@form" listener="#{DCProfileTabZonesController.pageFirst}" /&gt;
                      &lt;/h:selectOneMenu&gt;&amp;nbsp;
  
                     ........................
                  &lt;/h:form&gt;         
              &lt;/h:panelGroup&gt;
          &lt;/ui:composition&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I hope that I solve the forms problem. But I found these problems:
  When I click on the <code>h:commandButton</code> to change the table page I'm redirected to page <code>DCProfileTabZones.jsf</code>. I'm not returned to page <code>DatacenterProfile.jsf?id=1002#</code>. Maybe this is because I use <code>h:commandButton</code>. </p>
  
  <p>The second problem is from <code>h:selectOneMenu</code>. When I select different number I get this error message in Firebug: </p>
  
  <pre><code>ReferenceError: mojarra is not defined
  function onchange(event) {
  mojarra.ab(this, event, "valueChange", "@form", "@form");
  } 
  </code></pre>
  
  <p>Would you please give me some advice how I can solve the problems.</p>