Question

I’m new to primefaces and try to realize a simple web-app with jsf. In this app I have a login.xhtml where a user can enter a name and his password. If login is successfull, my LoginBean class redirects him to another page called index.xhtml in the folder basicSites.
While on login.xhtml everything works fine, on index.xhtml occured an error. After the redirect to this site i only see a white site, and the browser console told me that there was a reference error, because jQuery is not defined. I researched through many other articles that have had a similar problem, but my problem isnt still solved.

Here are some code snippets for better understanding.

login.xhtml

<h:head>
    <title>Zugangsverwaltung | Login</title>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/default.css" />
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/syntax.css" />
    <script type="text/javascript" href="#{request.contextPath}/scripts.js"/>
</h:head>

<h:body>
    <script type="text/javascript"> 
        jQuery(document).ready(function () {
            jQuery('#logoutLink').fadeOut();
        });
        function handleLoginRequest(xhr, status, args) { 
            if(args.validationFailed || !args.loggedIn) {  
                jQuery('#dialog').effect("shake", { times:3 }, 100);  
            } else {  
                dlg.hide();  
                jQuery('#loginLink').fadeOut(0); 
                jQuery('#logoutLink').fadeIn();
            }  

        } </script>

LoginBean.java

public void login(ActionEvent actionEvent) {
    RequestContext context = RequestContext.getCurrentInstance();
    FacesMessage msg = null;
    boolean loggedIn = false;

    FacesContext ctx = FacesContext.getCurrentInstance();
    HttpServletRequest request = (HttpServletRequest) ctx.getExternalContext().getRequest();

    try {
        request.login(username, password);
        loggedIn = true;
        msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Willkommen", username);
        FacesContext.getCurrentInstance().addMessage("global", msg);
    } catch (ServletException e) {
        loggedIn = false;
        msg = new FacesMessage(FacesMessage.SEVERITY_WARN, "Login fehlgeschlagen!", "Invalid credentials");
        FacesContext.getCurrentInstance().addMessage("local", msg);
    }

    try {
        if (loggedIn) {
            ExternalContext ectx = ctx.getExternalContext();
            ectx.redirect(request.getContextPath() + "/basicSites/index.xhtml");
        }
    } catch (Exception e) {
        System.out.println("LoginBean - login: " + e.getMessage());
    }

And at least the index.xhtml, where the error occurs:

<h:head>
    <title>Zugriffsverwaltung | Backend</title>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/default.css" />
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/syntax.css" />
    <script type="text/javascript" href="#{request.contextPath}/scripts.js" />
</h:head>

<h:body>
    <script type="text/javascript"> 
        jQuery(document).ready(function () { <!-- Here: JQuery is not definded --> 
            jQuery('#logoutLink').fadeOut();
        });</script>

    <p:layout fullPage="true" >
        <p:layoutUnit id="center" position="center"> <!-- ... -->

I hope anyone have an idea what to do now 😉 I’m appreciate for every hint that helps me to solve the problem.

Thanks in advance 😀

Answer 1

Try adding xmlns:p="http://primefaces.org/ui" to your page

If the above wont help :

You can also add

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />

To your <h:head> , that should include the jQuery bundled with primefacs