h:selectManyChexkbox`s <f:ajax event=“click” li

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.

My xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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">

<h:head>
<link rel="stylesheet" type="text/css"
    href="/juritest/resources/css/style.css" />
<script type="text/javascript"
    src="/juritest/resources/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/juritest/resources/js/menu.js"></script>
</h:head>

<h:body>
<ui:composition template="../../templates/gridsTemplate.xhtml">
    <ui:define name="content">
        ...
                <h:panelGroup style="text-align: left">
                    <hr />
                    <h:selectManyCheckbox
                        value="#{gridPopUpBean.oneQuestionUserAnswers}" 
                        layout="pageDirection">
                        <f:selectItem itemValue="a"
                            itemLabel="#{gridPopUpBean.currentQuestion.a}" />
                        <f:selectItem itemValue="b"
                            itemLabel="#{gridPopUpBean.currentQuestion.b}" />
                        <f:selectItem itemValue="c"
                            itemLabel="#{gridPopUpBean.currentQuestion.c}" />
                        <f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/>
                    </h:selectManyCheckbox>
                </h:panelGroup>
   ...

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 < h:head> not just < head>, I read that this was a possible problem.

And the snippet from the bean:

public void changeListener(ValueChangeEvent e) {

    change = true;
}

I have tried without < f:ajax like

<h:selectManyCheckbox
                        value="#{gridPopUpBean.oneQuestionUserAnswers}" valueChangeListener="#{gridPopUpBean.changeListener()}" onclick="submit()"
                        layout="pageDirection">
                        <f:selectItem itemValue="a"
                            itemLabel="#{gridPopUpBean.currentQuestion.a}" />
                        <f:selectItem itemValue="b"
                            itemLabel="#{gridPopUpBean.currentQuestion.b}" />
                        <f:selectItem itemValue="c"
                            itemLabel="#{gridPopUpBean.currentQuestion.c}" />
                        <f:ajax event="click" listener="#{gridPopUpBean.changeListener()}"/>
                    </h:selectManyCheckbox>

but with no luck...

One or more resources have the target of 'head', but no 'head' component has been defined within the view." I have < h:head> not just < head>, I read that this was a possible problem.

Anything outside <ui:composition> is ignored. If you need a <h:head>, it needs to go in the master template, the gridsTemplate.xhtml (or any of its parent templates).

Further, if you aren't using a visual editor for your XHTML files (like Dreamweaver), then I strongly recommend to stop putting any content outside <ui:composition>, otherwise you keep confusing yourself.