Uncaught ReferenceError: $ is not defined JSF Primefaces (h:head included) - jsf

I have a simple JSF page displaying a text editor from primefaces (Showcase).
However, the text editor is not displayed. When I inspect it (F12 in chrome), I see multiple errors, the first one is:
core.js.xhtml:2 Uncaught ReferenceError: $ is not defined
at Object.resolveUserAgent (core.js.xhtml:2)
at Object.init (core.js.xhtml:2)
at core.js.xhtml:2
The others are Uncaught TypeError: Cannot read property 'Tag from Primefaces' of undefined.
I read those questions: 1 / 2, but I do have a <h:head>.
What am I missing?
My page (index.xhtml):
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<h:outputStylesheet library="css" name="style.css" />
<h:outputScript library="js" name="script.js" />
</h:head>
<h:body>
<p:textEditor value="#{textEditorController.text}" height="300" style="margin-bottom:10px"/>
<p:commandButton value="Submit" action="#{textEditorController.submit}"/>
</h:body>
</h:html>
My web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
<display-name>MusiglabelWEB</display-name>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
</web-app>
I use muliple projects (WEB, JPA, EJB, EAR), if that matters.
Included Libraries in WEB Project:
Primefaces 6.1 (Downloaded here)
Bootsfaces 1.1.1 (Downloaded here)

This is a bug in PrimeFaces, I registered it here. It manifests when a p:textEditor is the first of PrimeFaces components in the final view.
To work around the bug simply add some other component before it, you can make it not rendered, so it won't affect your page otherwise:
<p:inputText rendered="false" />
<p:textEditor />

I got the same problem.
solved with importing both jquery and jquery ui like following
...
<h:head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</h:head>
...

Related

Odd behavior in Java EE Web App when using PrimeFaces Components

The issue:
I have two <p:selectOneMenu> and when I drop the first menu down, I can not select any items in the menu, and once I click out of the menu I can not open the menu again. Then, if I open the second <p:selectOneMenu> I can select an item in the second menu, but then I can't open either menu again.
Trying to use a <p:pickList> and none of the buttons to move items around work.
<p:growl> functionally is non-existent, as is the action method never gets called.
I'm sure I could keep listing stuff that isn't working for me, but that is the three major components I am trying to use.
The setup:
A Java EE Web Application using JSF 2.3, JDK 18, primefaces-8.0.jar, on a Payara Server v5.2022.2, the primefaces-8.0.jar was imported to the library, and the source was declared as primfaces-8.0-sources.jar. My faces-config only defines a messages resource bundle and some navigation cases. As far as the web.xml it is pretty basic, see below:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
1440
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>/index.xhtml</welcome-file>
</welcome-file-list>
<filter>
<filter-name>MyFilter</filter-name>
<filter-class>Filters.AuthFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>AuthFilter</filter-name>
<url-pattern>*.xhtml</url-pattern>
</filter-mapping>
</web-app>
Libraries:
index.xhtml Code:
<?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 xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Title</title>
<h:outputStylesheet library="css" name="primeflex3.1.2.css"/>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputStylesheet library="css" name="datatables.css"/>
<h:outputScript library="js" name="datatables.min.js"/>
</h:head>
<h:body>
<h:form>
<ui:include src="edit.xhtml"/>
</h:form>
</h:body>
</html>
edit.xhtml Code:
<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://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<h:form rendered="#{navBean.currentTabIndexIsEdit}" >
<center>
<h:outputLabel for="#next" value="Assigned Shop"/>
<p:selectOneMenu id="shops_menu" value="#{edit_Bean.job.shop_id}" appendTo="#this" >
<f:selectItem itemLabel="Select Shop" itemValue="" />
<f:selectItem itemValue="1" itemLabel="Broussard, Louisiana" />
<f:selectItem itemValue="2" itemLabel="North Louisiana" />
<f:selectItem itemValue="3" itemLabel="South Texas" />
<f:selectItem itemValue="4" itemLabel="West Texas" />
</p:selectOneMenu>
<h:outputLabel>Rig Name </h:outputLabel>
<p:selectOneMenu id="rigs_menu" value="#{edit_Bean.job.rig_id}" appendTo="#this">
<f:selectItems value="#{edit_Bean.rigs}" var="rigs" itemLabel="#{rigs.rig_name}" itemValue="#{rigs.rig_id}" />
</p:selectOneMenu>
<!-- Other Items -->
</center>
</form>
</ui:composition>
</html>
edit_Bean.java Code:
No much to put here, its just a named bean with a session scope with a few supporting methods.
Thanks for any help in advance!
The solution
If you see in index.xhtml, I am including a javascript file from datatables. That particular version of the JS file from data tables included its own jQuery version, which was conflicting with primefaces. I re-downloaded the datatables java script with out jQuery selected and it is now working.

JSF HTTP Status 404 – Not Found in Hello world program

I tried to make a hello world program in jsf. I want to run xhtml file in eclipse (I still haven't used Java), but I can't start it. I get only general error
HTTP Status 404 – Not Found: Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
My other .jsp files run without problem. When I run the xhtml file, this is exact link showing in a browser: http://localhost:8080/JSFProjectHello/faces/hello-world.xhtml There are files of the jsf project:
/JSFProjectHello/WebContent/hello-world.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>Hello World - Input Form</title>
</h:head>
<h:body>
<h:form>
<h:inputText id="name" value="#{theUserName}"
a:placeholder="What's your name?" />
<h:commandButton value="Submit" action="myresponse" />
</h:form>
</h:body>
</html>
.
/JSFProjectHello/WebContent/hello-world.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Hello World - Response</title>
</h:head>
<h:body>
Hello, #{theUserName}
</h:body>
</html>
.
/JSFProjectHello/WebContent/WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
<display-name>JSFProjectHello</display-name>
<welcome-file-list>
<welcome-file>hello-world.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
</web-app>
.
Finally, I should add I use Java8 and as a server Tomcat9. And I've imported this library into the project:
/JSFProjectHello/WebContent/WEB-INF/lib/javax.faces-2.2.8-sources.jar
So I found an error finally. I downloaded incorrect library javax.faces-2.2.8-sources.jar, the correct one should be javax.faces-2.2.8.jar

primefaces tag not working in xhtml page

I am developing a jsf web application using primefaces tool for the ui tags. i'm having one problem in primefaces tag which is not working it show an exception like this
/templates/leftmenu.xhtml at line 10 and column 28 <p:tabMenu> Tag Library supports namespace: http://primefaces.org/ui, but no tag was defined for name: tabMenu
my leftmenu xhtml page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<h:form>
<p:tabMenu activeIndex="0">
<p:menuitem value="Home" url="Menu.jsf" icon="ui-icon-star" />
<p:menuitem value="Fabricants" url="/pagess/pagesFabricant/Fabricant.jsf" icon="ui-icon-wrench" />
<p:menuitem value="Composants" url="/pagess/pagesComposant/Composant.jsf" icon="ui-icon-search" />
<p:menuitem value="Dossier d'equivalence" url="DEQ.jsf" icon="ui-icon-document" />
</p:tabMenu>
</h:form>
</body>
</html>
my template xhtml file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link type="text/css" rel="stylesheet" href="theme.css.jsf.css"/>
<title>Cation</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
<p:graphicImage value="/logo.gif" />
</p:layoutUnit>
<p:layoutUnit position="south" size="40" closable="true" collapsible="true">
<span style="padding-left: 500px;">Company Name, Copyright 2013</span>
</p:layoutUnit>
<p:layoutUnit position="west" size="180" header="Menu" collapsible="true">
<ui:insert name="leftmenu">
<div>
<ui:include src="leftmenu.xhtml" />
</div>
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">
Select one of the links on the left to proceed.
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
my web.xml file
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Cation</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/login.xhtml</welcome-file>
</welcome-file-list>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>glass-x</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<description>
This parameter tells MyFaces if javascript code should be allowed in
the rendered HTML output.
If javascript is allowed, command_link anchors will have javascript code
that submits the corresponding form.
If javascript is not allowed, the state saving info and nested parameters
will be added as url parameters.
Default is 'true'</description>
<param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<description>
If true, rendered HTML code will be formatted, so that it is 'human-readable'
i.e. additional line separators and whitespace will be written, that do not
influence the HTML code.
Default is 'true'</description>
<param-name>org.apache.myfaces.PRETTY_HTML</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>
If true, a javascript function will be rendered that is able to restore the
former vertical scroll on every request. Convenient feature if you have pages
with long lists and you do not want the browser page to always jump to the top
if you trigger a link or button action that stays on the same page.
Default is 'false'
</description>
<param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
<param-value>true</param-value>
</context-param>
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>uploadDirectory</param-name>
<param-value>C:\</param-value>
</init-param>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>1000000</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>
and i'm using primefaces 3.2 jar file
Can any one help me to solve this problem plz...
tabMenu is not supported in primefaces 3.2 version. Its been supported for version 3.4 and more.

PrimeFaces components are not rendered

I've developed an application using JSF with PrimeFaces. I've a problem in the Facelets page where <p:xxx> tags are not displayed in the page. Here is my Facelets page to display label, textbox and button. Only label is displayed in the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:i="http://primefaces.prime.com.tr/touch"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<body>
<ui:composition template="/templates/template.xhtml">
<ui:define name="content">
<h:form>
<h:outputLabel for="curator" value="Name:" style="font-weight:bold"/>
<p:inputText id="curator" value="#{user.curator}" />
<p:commandButton value="Submit" update="display"/>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
my web.xml file
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>Cation</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>faces/login.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<listener>
<listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
</listener>
</web-app>
How is this caused and how can I solve it?
It seems the label is displaying because it is an h-tag whereas the other tags are p, so first off check whether your primefaces jar is implemented by checking the Libraries on your project (if using Netbeans ) or Java Resources\Libraries if on eclipse. The xmlns:p="http://primefaces.org/ui" is not sufficient to make primefaces work, it only specifies the namespace.
Note : you're tagging primefaces-extensions where I think primefaces tag is more relevant in your case.

Setup Project with JSF2.0 & Prime Faces

I am try to setup JSF project with prime faces library
When I run this setup it shows be following error
org.apache.jasper.JasperException: javax.servlet.ServletException: null source
org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:54
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:417)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:320)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:266)
javax.servlet.http.HttpServlet.service(HttpServlet.java:803)
I did not able to find out reason behind it . following is by setup
Folloing are the library I included into web-inf/lib
1. jsf-api-2.0.3.jar
2. jsf-impl-2.0.3.jar
3. jstl-1.0.2.jar
4. primefaces-3.4.jar
Following are the entrires into web.xml file
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>primefaces.skin</param-name>
<param-value>none</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<listener>
<listener-class>
com.nsf.ecap.web.base.ECapStartUpServlet
</listener-class>
</listener>
</web-app>
login.xhtml
<h:body>
<CENTER>
<h:panel header="Login Form">
<h:Form>
<h:PanelGrid columns="2" cellpadding="2">
<h:outputLabel value="UserName" for="#{loginBBean.userInfo.username}"> </h:outputLabel>
<h:inputText value="#{loginBBean.userInfo.username}" label="UserName"> </h:inputText>
<h:outputLabel value="Password" for="#{loginBBean.userInfo.password}"></h:outputLabel>
<h:inputSecret value="#{loginBBean.userInfo.password}"></h:inputSecret>
<h:commandButton value="Login" type="submit" action="#{loginBBean.doLogin}"></h:commandButton>
</h:PanelGrid>
<h:messages>
</h:messages>
</h:Form>
</h:panel>
</CENTER>
</h:body>
</html>
index.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<jsp:forward page="jsp/login/login.jsf"/>
</body>
</html>
"My JSP 'index.jsp' starting page"? Please block/ignore/throwaway that tutorial you're reading now. It's only completely confusing you and teaching you bad practices.
As to your list of libraries:
Folloing are the library I included into web-inf/lib
jsf-api-2.0.3.jar
jsf-impl-2.0.3.jar
jstl-1.0.2.jar
primefaces-3.4.jar
First of all, the JSTL version is wrong. It should be at least JSTL 1.1 or preferably 1.2. The EL (expression language, those ${}/#{}) things would otherwise fail to work. Remove jstl-1.0.2.jar and put jstl-1.2.jar in place.
Further it looks okay. It only surprises me that you've more than 2 years old JSF API/impl versions while you've a fairly recent (less than 2 weeks) PrimeFaces version. I'd align those JSF API/impl versions as well to be the latest available. It's currently already at 2.1.13 (note: it's now composed of only one JAR file javax.faces.jar instead of two JAR files).
As to your web.xml:
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
This is declared conform Servlet 2.5 spec which is over 6 years old already. Are you sure that you're running such an outdated container? Given the presence of the JSF and JSTL libraries, I assume that you're using Tomcat. The current Tomcat version, 7.x, exist more than 2 years already and is Servlet 3.0 compatible. You should declare your web.xml to match the highest supported version of the target container.
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
Further, those javax.faces.STATE_SAVING_METHOD and javax.faces.DEFAULT_SUFFIX entries represent the default values already. Just get rid of them to minimize noise.
As to your login.xhtml:
<h:Form>
<h:PanelGrid columns="2" cellpadding="2">
Tag names are case sensitive. The <h:Form> and <h:PanelGrid> doesn't exist at all. It are <h:form> and <h:panelGrid>.
<CENTER>
While not immediately a problem, but this HTML element is deprecated since 1998 in favor of CSS. Also, seeing it in uppercased flavor instead of <center>, which is very typical for pre-90's HTML style, doesn't give me the impression that you're reading the most recent and right books/tutorials to learn web development. You should assure that your learning resources are up to date.
As to your index.jsp: this is completely useless. Remove it altogether. Just change your web.xml from
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
to
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>login.xhtml</welcome-file>
</welcome-file-list>
and this way login.xhtml will show up as "home page" when you access / in your webbrowser. Note that you shouldn't and don't need *.jsf URL pattern anymore.
See also:
Our JSF wiki page - at the bottom you can find decent JSF 2.0 resources

Resources