1

I am trying to add the Calendar effect (using Primeface) to my JSF web page. i am using Netbeans 6.9.1 and glassfish 3.1.

I installed Primeface to my application as described in this blog

And copied some code from Primefaces website. I copied the entire form and pasted it on my xhtml file. and i changed the bean class accordingly.

I am not getting the Calendar pop up in my web page. Why is this happening. I tested this on Chrome and Firefox still no luck. Can someone help me

Illep
  • 16,375
  • 46
  • 171
  • 302

2 Answers2

6

First, ensure that you've declared the PrimeFaces tag library in your XML namespace. For the current PrimeFaces 2.x version, that is

xmlns:p="http://primefaces.prime.com.tr/ui"

Second, PrimeFaces comes along with a lot of CSS/JS resources which are supposed to be auto-included by a <h:head>. The calendar component (and many others) are styled and activated by exactly those resources. So, in order to get them to auto-included, you need to ensure that you've a <h:head> instead of <head> in your master template. And to be consistent, replace <body> by <h:body> as well.

Update based on the comments, there was a JavaScript conflict. The <p:calendar> works fine at its simplest form. It ceased to work because you've a jQuery menubar in your template which in turn would require a <script src="jquery.js">. Since PrimeFaces already ships with jQuery bundled, it has most likely conflicted with the manual jQuery script include. You need to get rid of the manual jQuery script include.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Yes, i had already included `` and `` tags. i have also included `xmlns:p="http://primefaces.prime.com.tr/ui" >` under html. When i add an ` ` to my code, the design of the textbox changes to the one as shown in there website. When i add the code for the Calendar component i only get a text box, when i click on it the calendar doesn't pop out. – Illep Aug 01 '11 at 17:25
  • Do you receive any JS/CSS errors/warnings in your web developer tools? What PrimeFaces version are you using? As of now, 2.2.1 is latest stable. The 3.0 is still beta and potentially instable. By the way, installing should be as easy as just dropping the JAR file in `/WEB-INF/lib` folder. At least, that's how it goes in Eclipse and other decent IDEs. – BalusC Aug 01 '11 at 17:28
  • I'm using the latest stable version (primefaces-2.2.1.zip). I don't see any JS/CSS warnings in the Netbeans IDE. About the installation, i followed the steps as given in the forum i pointed out in my question. and i added the Jar file in the `Libraries` folder in my Web Project – Illep Aug 01 '11 at 17:34
  • JS/CSS warnings should be displayed by whoever runs it, which is usually the webbrowser. In Firefox, you can check them with Firebug. In Chrome, you can check them with builtin Firebug-lookalike web developer tools (press F12). – BalusC Aug 01 '11 at 17:38
  • Oh.. then i get `calendar.js.jsf:1 uncaught type error: cannot read property 'regional of undefined' `. That's the only error that's there. I don't get it – Illep Aug 01 '11 at 17:54
  • I think that you've a conflict in your JS libraries. Did you try to test it with the most minimal view code? E.g. ` Test` – BalusC Aug 01 '11 at 18:02
  • yeah, it works in its simplest form. i added a Jquery based menubar, and i think there's a conflict between the two js files. – Illep Aug 01 '11 at 18:17
  • PrimeFaces already ships with jQuery bundled. Get rid of your `` which is apparently of a different version. After that, you may want to look into PrimeFaces' `` component: http://www.primefaces.org/showcase/ui/menubar.jsf PF has pretty a lot of jQuery (UI) based components and it's often more convenient to use that instead of "plain vanilla" jQuery (UI) stuff. – BalusC Aug 01 '11 at 18:19
  • I have ` `` ` and if i get rid of `` the calendar works but the menu doesn't work as expected. – Illep Aug 01 '11 at 18:24
  • PF 2.2.1 ships with jQuery 1.4.4. You'll probably need to update manually included dependency libraries as well. They are apparently designed for jQuery 1.2.x in mind. Or just look at `` as suggested in previous comment :) Finally, I warmly recommend you to check this question/answer so that you can think twice about this in the future: http://stackoverflow.com/questions/4421839/what-is-the-need-of-jsf-when-ui-can-be-achieved-from-css-html-javascript-jquery – BalusC Aug 01 '11 at 18:28
1

When you use the jquery datepicker widget and I assume also the calendar widgit you can set the regional parameter to use date formats of a particular country. For example: $.datepicker.setDefaults( $.datepicker.regional[ "en-GB" ] ); If you do this you must include the appropriate definitions, e.g. <script type="text/javascript" src="js/datepicker-en-GB.js"></script>

Dabble
  • 39
  • 2