title: datepicker() function of jQuery not working
body: <p>I have added <code>datepicker()</code> function to my form element with <code>id=fromDate</code></p>
  
  <p><strong>AllocateTask.xhtml</strong></p>
  
  <pre><code>&lt;ui:composition xmlns="http://www.w3.org/1999/xhtml"
                  xmlns:h="http://xmlns.jcp.org/jsf/html"
                  xmlns:f="http://xmlns.jcp.org/jsf/core"
                  xmlns:ui="http://java.sun.com/jsf/facelets"
                  template="/webpages/templates/MainTemplate.xhtml"&gt;
      &lt;ui:define name="infomationPartOfBody"&gt;
          &lt;h:form&gt;
              &lt;div class="infoContent"&gt;
                  &lt;table class="login"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h:outputLabel value="Task to be Allocated"&gt;&lt;/h:outputLabel&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;h:inputText id="subtaskid" value="#{allocateTaskBean.taskID}"/&gt;&lt;/td&gt;    
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h:outputLabel value="Employee for the Task"/&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;h:inputText id="empid" value="#{allocateTaskBean.empID}"/&gt; &lt;/td&gt;
                      &lt;/tr&gt;   
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h:outputLabel value="From"/&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;h:inputText id="fromDate" value="#{allocateTaskBean.fromDate}"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h:outputLabel value="To"/&lt;/td&gt;
                          &lt;td&gt;&lt;h:inputText id="toDate" value="#{allocateTaskBean.toDate}"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;h:commandButton value="Allocate" action="#{allocateTaskBean.allocateTask}" &gt;&lt;/h:commandButton&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;!--&lt;td&gt; &lt;h:message value="{allocateTaskBean.messagePrint}"/&gt; &lt;/td&gt;--&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;        
              &lt;/div&gt; 
          &lt;/h:form&gt;
      &lt;/ui:define&gt;
  &lt;/ui:composition&gt;
  </code></pre>
  
  <p><strong>My JQuery file (JQueryFile.js):</strong></p>
  
  <pre><code>$(document).ready(function()
  {   
      $("#loginWindow").hide();
      $(".reportItems").hide();
      $("#fromDate").datepicker();
  
      $("#loginSlide").click(function()
      {
          $("#loginWindow").slideToggle(200);
      });
  
      $(".reportMenu").click(function()
      {
          $(".reportItems").slideToggle(150);
      });      
  });
  </code></pre>
  
  <p>Now as I have used templates, the script have been added to the head of the template file: <code>MainTemplate.xhtml</code></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:ui="http://java.sun.com/jsf/facelets"&gt;
      &lt;f:view&gt;
          &lt;h:head&gt;
              &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="../JavaScriptPages/JQueryFile.js"&gt;&lt;/script&gt;
  
              &lt;title&gt;State Transport Department- Work Schedule&lt;/title&gt;
              &lt;link  rel="stylesheet" type="text/css" href="../CSS/CompleteTemplateCSS.css"/&gt;
              &lt;link  rel="stylesheet" type="text/css" href="../CSS/templateCSS.css"/&gt;
          &lt;/h:head&gt;
  
  // The rest of the content
  </code></pre>
  
  <h2>My Problem</h2>
  
  <p>When I click on the text field with <code>id=fromDate</code> the calendar is not sliding down and appearing. I can't figure out where the problem is.</p>
  
  <p>The <strong>generated source code</strong> is:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="j_idt2"&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"&gt;  &lt;/script&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery- ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="../JavaScriptPages/JQueryFile.js"&gt;&lt;/script&gt;
  
          &lt;title&gt;State Transport Department- Work Schedule&lt;/title&gt; 
          &lt;link rel="stylesheet" type="text/css" href="../CSS/CompleteTemplateCSS.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="../CSS/templateCSS.css" /&gt;&lt;/head&gt;
    &lt;body&gt;
  
  &lt;div class="infoContent"&gt;
  &lt;table class="login"&gt;
   &lt;tr&gt;
              &lt;td&gt;&lt;label&gt;From&lt;/label&gt; &lt;/td&gt;
              &lt;td&gt;&lt;input id="j_idt26:fromDate" type="text" name="j_idt26:fromDate" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
  &lt;/table&gt; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>