title: h:selectManyChexkbox`s <f:ajax event="click" listener doesn't fire and gives an error
body: <p>I want to fire an event change listener when the user selects / deselects something in the h:selectManyCheckbox, if it leaves it alone nothing should happen. </p>
  
  <p>My xhtml:</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;html lang="en" 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:c="http://java.sun.com/jsp/jstl/core"&gt;
  
  &lt;h:head&gt;
  &lt;link rel="stylesheet" type="text/css"
      href="/juritest/resources/css/style.css" /&gt;
  &lt;script type="text/javascript"
      src="/juritest/resources/js/jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/juritest/resources/js/menu.js"&gt;&lt;/script&gt;
  &lt;/h:head&gt;
  
  &lt;h:body&gt;
  &lt;ui:composition template="../../templates/gridsTemplate.xhtml"&gt;
      &lt;ui:define name="content"&gt;
          ...
                  &lt;h:panelGroup style="text-align: left"&gt;
                      &lt;hr /&gt;
                      &lt;h:selectManyCheckbox
                          value="#{gridPopUpBean.oneQuestionUserAnswers}" 
                          layout="pageDirection"&gt;
                          &lt;f:selectItem itemValue="a"
                              itemLabel="#{gridPopUpBean.currentQuestion.a}" /&gt;
                          &lt;f:selectItem itemValue="b"
                              itemLabel="#{gridPopUpBean.currentQuestion.b}" /&gt;
                          &lt;f:selectItem itemValue="c"
                              itemLabel="#{gridPopUpBean.currentQuestion.c}" /&gt;
                          &lt;f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/&gt;
                      &lt;/h:selectManyCheckbox&gt;
                  &lt;/h:panelGroup&gt;
     ...
  </code></pre>
  
  <p>I get an error saying "One or more resources have the target of 'head', but no 'head' component has been defined within the view." I have &lt; h:head> not just &lt; head>, I read that this was a possible problem.</p>
  
  <p>And the snippet from the bean:</p>
  
  <pre><code>public void changeListener(ValueChangeEvent e) {
  
      change = true;
  }   
  </code></pre>
  
  <p>I have tried without &lt; f:ajax like </p>
  
  <pre><code>&lt;h:selectManyCheckbox
                          value="#{gridPopUpBean.oneQuestionUserAnswers}" valueChangeListener="#{gridPopUpBean.changeListener()}" onclick="submit()"
                          layout="pageDirection"&gt;
                          &lt;f:selectItem itemValue="a"
                              itemLabel="#{gridPopUpBean.currentQuestion.a}" /&gt;
                          &lt;f:selectItem itemValue="b"
                              itemLabel="#{gridPopUpBean.currentQuestion.b}" /&gt;
                          &lt;f:selectItem itemValue="c"
                              itemLabel="#{gridPopUpBean.currentQuestion.c}" /&gt;
                          &lt;f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/&gt;
                      &lt;/h:selectManyCheckbox&gt;
  </code></pre>
  
  <p>but with no luck...</p>