0

I'm trying to run the same code as this page to add a datepicker to my input: http://jqueryui.com/demos/datepicker/ so on this page if you click on the input box, a date picker table is displayed. this is the code to my page:

<?xml version="1.0" encoding="UTF-8" ?>
<!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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/jquery.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/datepicker.js"></script>
        <script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/js/widget.js"></script>   
        <link rel="icon" 
              type="image/png" 
              href="#{facesContext.externalContext.requestContextPath}/resources/images/askbirdfavicon.png"/>
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/form.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/datepicker.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/adminnavbar.css" rel="stylesheet" type="text/css" />
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
        <title>AskBird</title>
    </h:head>
<h:body>
        <h:form id="form" >                                  
                <script>
                    $(function() {
                        $( "#datepicker" ).datepicker();
                    });
                </script>
                <div class="demo">

                    Date: <input type="text" id="datepicker" class="hasDatepicker"/>

                </div><!-- End demo -->               
            <script>

                $(document).ready(function () {
                    $("p").text("The DOM is now loaded and can be manipulated.");
                });                                
            </script>
            <p>Not loaded yet.</p>    
</h:form>
    </h:body>
</html>

My jquery library is surely loaded, because as can be seen from the following picture "The DOM is now loaded message is displayed instead of "not loaded" in my paragraph element.

enter image description here

Also to make sure that my datepicker.js library is loaded I put an empty div with the id of "datepicker" to the code to see a calendar displaying on my page. (again you see it in the pic). The problem is that by clicking on my input, nothing is popped. Because that's how it works in the page that I provided above. What do you think I'm doing wrong?

disasterkid
  • 6,948
  • 25
  • 94
  • 179

2 Answers2

1

Where's the reference to jquery-ui JS and Css file?

try wrap your code too:


$(document).ready(function () 
{
    $( "#datepicker" ).datepicker();
});
Thiago Custodio
  • 17,332
  • 6
  • 45
  • 90
1

You have loaded the JS, but not the CSS.

You have not loaded jquery ui css file, thats the problem, load it it would work.

Add this: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css or alternatively download the css and images from jquery ui site.

EDIT: Also i dont see the jquery ui-core js file? have you included?

http://jqueryui.com/download, kindly read going to this link, there are some necessary files for datepicker to work.

Working Example: http://jsfiddle.net/tbYPf/30/

abhijit
  • 1,958
  • 3
  • 28
  • 39
  • the look of the calendar changes but nothing happens when i click on my input. – disasterkid Oct 08 '12 at 13:02
  • I included the core file as well. Still no luck. I mean I'm sure the calendar is there, but no effect on the input. If the datepicker was not loaded i didn't get the naked calendar there. – disasterkid Oct 08 '12 at 13:29
  • 1
    strange, if you have all the necessary files from the download link above, i.e jquery, jquery-ui, jquery-ui-css, vrythin should work fine. – abhijit Oct 08 '12 at 13:42
  • i think we are getting somewhere now. i changed all my xhtml tags into simple html tags and it worked. but the problem is that this is a jsf application and i need to work with xhtml. any suggestions? – disasterkid Oct 08 '12 at 13:42
  • ok yes i think googling How to use jQuery with in xhtml? will help you, this is what i found http://stackoverflow.com/questions/3888881/how-to-use-jquery-with-in-xhtml – abhijit Oct 08 '12 at 13:50
  • precisely check this for your solution : http://stackoverflow.com/a/3906718/648372 – abhijit Oct 08 '12 at 13:50
  • so this is how i fixed this: i got rid of the class="hasDatepicker" attribute in my input and turned my body tag to simple html rather than h:body of xhtml, hope it does not affect the rest of my code though. thanks you anyways. – disasterkid Oct 08 '12 at 13:51