title: no "head" component has been defined
body: <p>I want to implement JSF page with AJAX. This is the code of the JSF page:</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"&gt;
      &lt;h:head&gt;
          &lt;ui:insert name="header"&gt;           
              &lt;ui:include src="header.xhtml"/&gt;         
          &lt;/ui:insert&gt;
      &lt;/h:head&gt;
      &lt;h:body&gt;
  
          &lt;h1&gt;&lt;img src="resources/css/images/icon.png" alt="NVIDIA.com" /&gt; Settings Center&lt;/h1&gt;
          &lt;!-- layer for black background of the buttons --&gt;
          &lt;div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black"&gt;
              &lt;!-- Include page Navigation --&gt;
              &lt;ui:insert name="Navigation"&gt;           
                  &lt;ui:include src="Navigation.xhtml"/&gt;         
              &lt;/ui:insert&gt;
  
          &lt;/div&gt;  
  
          &lt;div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;"&gt; 
              &lt;h:graphicImage alt="Application Settings"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_application_settings.png" /&gt;
          &lt;/div&gt;
          &lt;div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px"&gt;
  
              &lt;div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px"&gt;
  
                  &lt;div id="settingsdiv" style="width:350px; height:400px; position:absolute;  background-color:r; top:20px; left:1px"&gt;
                      &lt;h:panelGrid columns="2"&gt;
                          &lt;h:panelGroup&gt;User Session Timeout&lt;/h:panelGroup&gt;
                          &lt;h:panelGroup&gt;
                              &lt;h:selectOneMenu value="#{ApplicationController.settingValue('SessionTTL')}"&gt;
                                  &lt;f:selectItem itemValue="one" itemLabel="Option one" /&gt;
                                  &lt;f:selectItem itemValue="two" itemLabel="Option two" /&gt;
                                  &lt;f:selectItem itemValue="three" itemLabel="Option three" /&gt;
                                  &lt;f:selectItem itemValue="custom" itemLabel="Define custom value" /&gt;
                                  &lt;f:ajax render="input" /&gt;
                              &lt;/h:selectOneMenu&gt;
                              &lt;h:panelGroup id="input"&gt;
                                  &lt;h:inputText value="#{ApplicationController.settingValue('SessionTTL')}" rendered="#{bean.type == 'custom'}" required="true" /&gt;
                              &lt;/h:panelGroup&gt;            
                          &lt;/h:panelGroup&gt;
  
                          &lt;h:panelGroup&gt;Maximum allowed users&lt;/h:panelGroup&gt;
                          &lt;h:panelGroup&gt;#{ApplicationController.settingValue('MaxUsersActive')}&lt;/h:panelGroup&gt;                                                                     
                      &lt;/h:panelGrid&gt;                                                             
  
                  &lt;/div&gt;   
  
                  &lt;div id="settingslayer" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:400px"&gt;
  
  
  
                  &lt;/div&gt;   
  
                  &lt;div id="settingspanel" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px"&gt;
  
  
                  &lt;/div&gt;   
  
  
  
              &lt;/div&gt;  
          &lt;/div&gt;
  
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I load the page I get this error:</p>
  
  <blockquote>
    <p>One or more resources have the target of "head", but no "head" component has been defined within the view.</p>
  </blockquote>
  
  <p>This is the code of the header:</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"&gt;
  
  
      &lt;title&gt;Settings Center&lt;/title&gt;
      &lt;link href="resources/css/helper.css" media="screen" rel="stylesheet" type="text/css" /&gt;
  
      &lt;link href="resources/css/dropdown.css" media="screen" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="resources/css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" /&gt;
  
      &lt;!--[if lt IE 7]&gt;
      &lt;script type="text/javascript" src="js/jquery/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery/jquery.dropdown.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- / END --&gt;
  
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The Ajax is not working and this error message appears when I load the page. Maybe I'm missing something to add. How I can fix the code?</p>
  
  <p>Best wishes 
  Peter</p>