title: tagmanager.js on JSF 2.2 form doesn't work. What am I doing wrong?
body: <p>I have been banging my head against the wall for hours trying to get <strong><a href="http://welldonethings.com/tags/manager/v3" rel="nofollow">tagmanager.js</a></strong> to work on my <strong>JSF 2.2</strong> page and now I am hoping for some help. I had it working fine using jsp pages but those are old and deprecated. I can input the tags fine but when I submit the form, the tag text doesn't make it into my java bean. Title, Description, and YouTube URL do make it into the bean. According to the tagmanager website, it should work the way I have it set up. The tags I type in should go into the hidden input called 'j_idt16:hiddenTags'</p>
  
  <p><strong>Link to tagmanager:</strong> <a href="http://welldonethings.com/tags/manager/v3" rel="nofollow">http://welldonethings.com/tags/manager/v3</a></p>
  
  <p><strong>Here is my webpage code "requestimp.xhtml"</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;h:html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:p="http://xmlns.jcp.org/jsf/passthrough"&gt;
  
  
  &lt;h:body&gt;
  &lt;ui:composition template="/WEB-INF/templates/DefaultTemplate.xhtml"&gt;
  &lt;ui:define name="content"&gt;
  
      &lt;h:outputScript library="js/jquery" name="jquery-1.10.2.min.js"/&gt;
      &lt;h:outputScript library="js/tagmanager" name="tagmanager.js"/&gt;
  
      &lt;f:verbatim&gt;
          &lt;script type="text/javascript"&gt;
          function start()
          {
              jQuery(".tm-input").tagsManager({
                  prefilled: null,
                  CapitalizeFirstLetter: false,
                  AjaxPush: null,
                  AjaxPushAllTags: null,
                  AjaxPushParameters: null,
                  delimiters: [44, 9, 13], // comma, tab, enter
                  backspace: [8],
                  maxTags: 6,
                  replace: true,
                  output: null,
                  tagsContainer: null,
                  tagCloseIcon: 'x',
                  tagClass: '',
                  hiddenTagListId: 'j_idt16:hiddenTags',
                  hiddenTagListName: null,
                  validator: null,
                  onlyTagList: false
              });
          };
  
          window.onload=function(){start();};
          &lt;/script&gt;
      &lt;/f:verbatim&gt;
  
      &lt;h:outputStylesheet library="css" name="tagmanager.css"/&gt;
      &lt;h1 class="codeimps-form-h1"&gt;Make A Request!&lt;/h1&gt;
      &lt;h:form&gt;
          &lt;h:inputHidden id="hiddenTags" value="#{requestBean.tags}"/&gt;
          &lt;h:panelGrid columns="3"&gt;
              &lt;h:outputText value="Title" styleClass="codeimps-form-description"&gt;&lt;/h:outputText&gt;
              &lt;h:inputText id="input_Title" value="#{requestBean.title}" size="32" required="true"&gt;&lt;/h:inputText&gt;
              &lt;h:message for="input_Title"&gt;&lt;/h:message&gt;
  
              &lt;h:outputText value="Description" styleClass="codeimps-form-description"&gt;&lt;/h:outputText&gt;
              &lt;h:inputTextarea id="input_Description" value="#{requestBean.description}" rows="5" cols="28" p:maxlength="140" required="true"&gt;&lt;/h:inputTextarea&gt;
              &lt;h:message for="input_Description"&gt;&lt;/h:message&gt;
  
              &lt;h:outputText value="YouTube URL" styleClass="codeimps-form-description"&gt;&lt;/h:outputText&gt;
              &lt;h:inputText id="input_YouTubeURL" value="#{requestBean.youtubeURL}" size="50" p:placeholder="video is worth a thousand words..."&gt;
              &lt;f:validator validatorId="YouTubeURLValidator"/&gt;
              &lt;/h:inputText&gt;
              &lt;h:message for="input_YouTubeURL"&gt;&lt;/h:message&gt;
  
              &lt;h:outputText value="Tags" styleClass="codeimps-form-description"&gt;&lt;/h:outputText&gt;
              &lt;h:inputText id="input_Tags" size="32" p:autocomplete="off" p:placeholder="enter a tag" p:class="input-medium tm-input tm-input-info" p:data-original-title=""&gt;&lt;/h:inputText&gt;
              &lt;h:message for="secret_Tags"&gt;&lt;/h:message&gt;
          &lt;/h:panelGrid&gt;
          &lt;h:commandButton value="submit" action="#{requestBean.submit}"&gt;&lt;/h:commandButton&gt;
      &lt;/h:form&gt;
  &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  &lt;/h:body&gt;
  &lt;/h:html&gt;
  </code></pre>
  
  <p><strong>This is the rendered output of my website when the form is loaded:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;head id="j_idt2"&gt;
    &lt;title&gt;codeimps.com&lt;/title&gt;&lt;link type="text/css" rel="stylesheet" href="/codeimps/faces/javax.faces.resource/codeimps.css?ln=css" /&gt;&lt;link type="text/css" rel="stylesheet" href="/codeimps/faces/javax.faces.resource/tagmanager.css?ln=css" /&gt;    &lt;/head&gt;&lt;body&gt;
  
  &lt;div id="header"&gt; 
           &lt;h1 class="codeimps-impact codeimps-impact-h1"&gt;codeimps - real working examples&lt;/h1&gt;
  &lt;/div&gt;
  
  
  &lt;div id="content"&gt;&lt;script type="text/javascript" src="/codeimps/faces/javax.faces.resource/jquery-1.10.2.min.js?ln=js/jquery"&gt;&lt;/script&gt;    &lt;script type="text/javascript" src="/codeimps/faces/javax.faces.resource/tagmanager.js?ln=js/tagmanager"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
              function start()
              {
                  jQuery(".tm-input").tagsManager({
                  prefilled: null,
                  CapitalizeFirstLetter: false,
                  AjaxPush: null,
                  AjaxPushAllTags: null,
                  AjaxPushParameters: null,
                  delimiters: [44, 9, 13], // comma, tab, enter
                  backspace: [8],
                  maxTags: 6,
                  replace: true,
                  output: null,
                  tagsContainer: null,
                  tagCloseIcon: 'x',
                  tagClass: '',
                  hiddenTagListId: 'j_idt16:hiddenTags',
                  hiddenTagListName: null,
                  validator: null,
                  onlyTagList: false
                  });
              };
  
          window.onload=function(){start();};
          &lt;/script&gt;
  
      &lt;h1 class="codeimps-form-h1"&gt;Make A Request!&lt;/h1&gt;
  &lt;form id="j_idt16" name="j_idt16" method="post" action="/codeimps/faces/requestimp.xhtml" enctype="application/x-www-form-urlencoded"&gt;
  &lt;input type="hidden" name="j_idt16" value="j_idt16" /&gt;
  &lt;input id="j_idt16:hiddenTags" type="hidden" name="j_idt16:hiddenTags" value="code" /&gt;        &lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="codeimps-form-description"&gt;Title&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input id="j_idt16:input_Title" type="text" name="j_idt16:input_Title" size="32" /&gt;    &lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="codeimps-form-description"&gt;Description&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;textarea id="j_idt16:input_Description" name="j_idt16:input_Description" cols="28" rows="5" maxlength="140"&gt;&lt;/textarea&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="codeimps-form-description"&gt;YouTube URL&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input id="j_idt16:input_YouTubeURL" type="text" name="j_idt16:input_YouTubeURL" size="50" placeholder="video is worth a thousand words..." /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;span class="codeimps-form-description"&gt;Tags&lt;/span&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input id="j_idt16:input_Tags" type="text" name="j_idt16:input_Tags" size="32" autocomplete="off" class="input-medium tm-input tm-input-info" placeholder="enter a tag" data-original-title="" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;input type="submit" name="j_idt16:j_idt29" value="submit" /&gt;&lt;input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="nbewb1N+jemdQtriI+qX0ls6u52sq5PP9zurZDzvcC+hWpAZZzvit9A4K1zEKSrQOQ660omyB7Rm70LLWR8n4VJH4dxEduElZeL3TCr8s+fuXENAk/gh7G6frdvazPY+R6m1kI/Idny8kChhW/6UyvrFD267PlruL9Phcwc3pSmIM0TlDf1o3JkbRog0SG4ZjnEC1Y0i9YXitrHxmL7b7WNM0za8IUjQ47vxeC+TG6Ka+O05VMm0rtDoS9eP8T4r1WKP2xPcySMxSYMF11POnwc5dqj8x0FALnGpWU6Sd2BkplptShHSyVp9dN5R3Os5kzVjJUbmq730vdgb1wPVZDx4MoOKY+3f9czOTwvUCcoltRb9FLjlbEGcGeE8wtuSEPOT0KvxejxONWp9cIpeelNPOOMvlaaV6tDX1ChVAzhCvFKLYIbSqVhW8Jompg+A6VqmnWUqSqPlR+IZ24unBF4UedMzFyqljLbskku03QQr9XRpIyF7ar1eEP6A0zvc4u4NJbTcWfcyKTRyE7QNuGfeABycZEKemOQgwW6G8NzZd0LgkxGcsKjVI89Nryrj9iWyuJX+8qcQJQeX0IZjsVUFTlyPmuiLWad33uPwq3SLaLR40S4gpoquKC1p3PpWbWyTwBEiwACjDKRWFJIZgoXctrzpffOmH6Xhuk2527VDcCDaw2kJ2kU/9+8wD3bWae51zF5gEfiFYd3ykafI/H4Fr12VKnypxX4G9jqBapj39gxHn4s5PYKhapxgODO1hN6e5KYM61dFYyPwwCLEOqQjsZ9rvMXuINAJbyZxYslils2uc8I3ZS6v2xgGLSLAYBKE6aSWxa0F+eciLLtewxSS7ThDHw7MUj9OZUKxfQOYYXkAepYzp2UVI3N92qyIXxxUf+HaI3t4byAiHOtD7JytbAS/9CKXDAFn7b7wR9gOqNi8E4VivKODqWDcYbAd" autocomplete="off" /&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt; 
           &lt;h3 class="codeimps-impact codeimps-impact-h3"&gt;Copyright 2013-2014 Jody McAdams&lt;/h3&gt;
  &lt;/div&gt;&lt;/body&gt;
  </code></pre>
  
  <p><strong>Final note:</strong>
  I have a java bean called "RequestBean.java" and <strong>all other inputs on the form work</strong> except for input with <strong>id="input_Tags"</strong></p>