JSF 2.0 can't render dialog from primefaces

Question

Lately i am having lots of issues with primefaces components, i dot know why. I use glassfishV3.0 and my primefaces version is 2.2.1 My problem now is that i cant make the p:dialog of primefaces render when i click on a table row. I do almos exactly as it is done in their example: http://www.primefaces.org/showcase/ui/datatableComplex.jsf

I think my issue has something to do with some configuration, because i am also having troubles with other primefaces components. Can somebody give me a hand please and tell me what i am missing to be able to use primefaces components like thisone with no problems? Here is the code:

THE JSF:

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.prime.com.tr/ui">
    <ui:composition template="WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="resultsForm">
<h:form enctype="multipart/form-data">
    <h:inputText id="search" value="" /><h:commandButton value="search"/>               
<p:dataTable var="garbage" value="#{resultsController.allGarbage}"  dynamic="true" paginator="true" paginatorPosition="bottom" rows="10"  
             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}  {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
             rowsPerPageTemplate="5,10,15" selection="#{resultsController.garbage}" selectionMode="single"  
            onRowSelectUpdate="display" onRowSelectComplete="fileDialog.show()">            

            <p:column sortBy="#{garbage.filename}" parser="string" filterBy="#{garbage.filename}" filterMatchMode="startsWith">  
            <f:facet name="header">  
            <h:outputText value="Filename" />  
            </f:facet>  
            <h:outputText value="#{garbage.filename}" />
             </p:column> 

            <p:column filterBy="#{garbage.description}" filterMatchMode="contains">  
            <f:facet name="header">  
            <h:outputText value="Description" />  
            </f:facet>  
            <h:outputText value="#{garbage.description}" />  
             </p:column> 

            <p:column sortBy="#{garbage.uploadDate}" parser="string">  
            <f:facet name="header">  
            <h:outputText value="Upload date" />  
            </f:facet>  
            <h:outputText value="#{garbage.uploadDate}" /> 
             </p:column>                
    </p:dataTable> 

    <p:dialog header="Modal Dialog" widgetVar="fileDialog" modal="true" height="200">    

    <h:panelGrid id="display" columns="2" cellpadding="4">  
        <h:outputText value="FileName:" />  
        <h:outputText value="#{garbage.filename}" />  

        <h:outputText value="Upload date:" />  
        <h:outputText value="#{garbage.uploadDate}" />  

        <h:outputText value="Description" />  
        <h:outputText value="#{garbage.description}" /> 
    </h:panelGrid>           

    </p:dialog> 

    </h:form>
</ui:define>
    </ui:composition>

    </html>

THE Managed bean

@ManagedBean
@ViewScoped
public class ResultsController implements Serializable{

@EJB
private ISearchEJB searchEJB;

private Garbage garbage;

public List<Garbage> getAllGarbage() {

    List<Garbage> tmpGarbage = new ArrayList<Garbage>();
    for(Garbage g :searchEJB.findAllGarbage()) {
        tmpGarbage.add(g);
    }
    return tmpGarbage;
}

public Garbage getGarbage() {
    return garbage;
}

public void setGarbage(Garbage garbage) {
    this.garbage = garbage;
}

The JSF before is a composite page that i use inside this template

      <!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
      <h:head>
      <title>title</title>
      <script type="text/javascript">
       PrimeFaces.widget.Uploader.prototype._createPostParams = function() {
       var b = {};
         b[PrimeFaces.PARTIAL_REQUEST_PARAM] = true;
       b[PrimeFaces.PARTIAL_PROCESS_PARAM] = this.id;
       b[PrimeFaces.PARTIAL_SOURCE_PARAM] = this.id;
       b[PrimeFaces.VIEW_STATE] = PrimeFaces.ajax.AjaxUtils.encodeViewState();
       if (this.cfg.update) {
         b[PrimeFaces.PARTIAL_UPDATE_PARAM] = this.cfg.update
        }
        var a = PrimeFaces.getCookie("JSESSIONID");
        if (this.cfg.script.indexOf("jsessionid") == -1) {
        paramIndex = this.cfg.script.indexOf('?');
          if (paramIndex != -1) {
           this.cfg.script = this.cfg.script.substring(0, paramIndex)
           + ";jsessionid=" + a
           + this.cfg.script.substring(paramIndex);
      } else {
         this.cfg.script = this.cfg.script + ";jsessionid=" + a;
       }
       }
      b['cid'] = "#{javax.enterprise.context.conversation.id}";
     return b;
      };
     PrimeFaces.widget.Uploader.prototype.createPostParams =                  PrimeFaces.widget.Uploader.prototype._createPostParams;
     </script>
     <script type="text/javascript" src="/ primefaces_resource/2.1/yui/datasource/datasource-min.js"></script> 
     <script type="text/javascript"  src="/primefaces_resource/2.1/primefaces/paginator/paginator.js"></script> 
     <script type="text/javascript" src="/primefaces_resource/2.1/yui/datatable/datatable-min.js"></script> 
     <script type="text/javascript" src="/primefaces_resource/2.1/primefaces/datatable/datatable.js"></script> 
     <script type="text/javascript" src="/primefaces_resource/2.1/yui/swf/swf-min.js"></script> 
     <script type="text/javascript" src="/primefaces_resource/2.1/yui/charts/charts-min.js"></script> 
     <script type="text/javascript" src="/primefaces_resource/2.1/primefaces/charts/charts.js"></script>
     </h:head>

     <body> 
 <ui:insert name="resultsForm"/>
     </body>
     </html>

My web.xml configuration

    <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">

<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>/pages/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <welcome-file>pages/index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping> 
    <filter>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <filter-class>org.primefaces.webapp.filter.FileUploadFilter
    </filter-class>        
</filter>
<filter-mapping>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

In the table i above everithing works, just the sortBy function and the p:dialog doesnt work. This is a messages that is displayed at the eclipse console when i refresh the page:

SEVERE: line 1:61 no viable alternative at character ';'

I dont understand what it means, i think i have some kind of configuration problem rather than a syntax error. Ill be really happy if somebody could help me fix this please.

Regarding the dialog the only difference to the primefaces showcase is the missing rowSelectListener in your code. Maybe that's a starting point for further investigations. Or try to call the dialog from outside the table with a commandLink to check if it is displayed at all. — Matt Handy, Mar 30 '11 at 18:37
Yes i can call the dialog from outside the table with a button like this: It works, but what is wrong, why it dont works when i click on a row from the table? — javing, Mar 30 '11 at 18:46
No it didnt work, i tried this: rowSelectListener="#{fileDialog.show()}" Are maybe some of the other options disturbing?: selection="#{resultsController.garbage}" selectionMode="single" update="display" rowSelectListener="#{fileDialog.show()}" — javing, Mar 30 '11 at 18:52
Try to put the `p:dialog` outside the `h:form` of your `p:dataTable' and see if that fix it? If not I will try to recreate your issue on my computer — Thang Pham, Mar 30 '11 at 19:03
I just did it i also restarted the app server and build again but it did not work. — javing, Mar 30 '11 at 19:11
@sfrj in the rowSelectListener you should call a backing bean method not the dialog.show() method. My idea was that the onRowSelectComplete may wait for the completion of a selectListener. Just a vague guess. — Matt Handy, Mar 30 '11 at 19:38
Weird. I try to recreate a simplified version of your code on my computer, and it work fine. Take a look at my post. Try to run it on a new project and see if it work? — Thang Pham, Mar 30 '11 at 19:42

score 7 · Accepted Answer · edited Dec 09 '13 at 16:31

uhmmm I create a simplified version of your code and mine work perfectly. Every time I click on the row, my dialog pop up. Try to run this code on a new project and see if it worked.

<?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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="themes/blitzer/skin.css?${config.startupTime}" type="text/css"/>

    </h:head>
    <h:body>
        <h:form enctype="multipart/form-data">
            <p:dataTable var="item" value="#{myBean.myList}"  dynamic="true" paginator="true" paginatorPosition="bottom" rows="10"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}  {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15" selection="#{myBean.selectedResult}" selectionMode="single"
                         onRowSelectUpdate="display" onRowSelectComplete="fileDialog.show()">
                <p:column>
                    <h:outputText value="#{item}"/>
                </p:column>
            </p:dataTable>            
        </h:form>
        <p:dialog widgetVar="fileDialog">
            <h:outputText value="Dialog open"/>
        </p:dialog>
    </h:body>
</html>

and here is my bean

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package com.test;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

/**
 *
 * @author KingdomHeart
 */
@ManagedBean
@ViewScoped
public class MyBean {

    private List<String> myList;

    private String selectedResult;

    public MyBean() {
    }

    @PostConstruct
    public void init(){
        myList = new ArrayList<String>();
        myList.add("Test1");
        myList.add("Test2");
        myList.add("Test3");
        myList.add("Test4");
        myList.add("Test5");
    }

    public List<String> getMyList() {
        return myList;
    }

    public void setMyList(List<String> myList) {
        this.myList = myList;
    }

    public String getSelectedResult() {
        return selectedResult;
    }

    public void setSelectedResult(String selectedResult) {
        this.selectedResult = selectedResult;
    }    
}

Update by sfrj enter image description here

As you see more than one of my rows are yellow, that is not suposed to be like that. selectionMode="single" is not working correctly.

Update by Harry

Here is how to convert Date type into String

public String formatDate(Date date) {
    if (date != null) {
        SimpleDateFormat sdf = new SimpleDateFormat("MMM dd yyyy");
        return sdf.format(date);
    }
    return null;
}

Then your JSF would be like this

h:outputText value="#{resultsController.formatDate(garbage.uploadDate)}" />

Update 2 by sfrj enter image description here

Here is the brand new JSF 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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:p="http://primefaces.prime.com.tr/ui">
     <ui:composition template="WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="resultsForm2">
<h:form enctype="multipart/form-data">              
    <p:dataTable var="garbage" value="#{resultsController.allGarbage}"  dynamic="true" paginator="true" paginatorPosition="bottom" rows="10"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}  {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                     rowsPerPageTemplate="5,10,15" selection="#{resultsController.selectedGarbage}" selectionMode="single"
                     rowSelectListener="#{resultsController.rowIsSelected}">
            <p:column>
                <h:outputText value="#{garbage.filename}"/>
            </p:column>
        </p:dataTable>            
    </h:form>
    <p:dialog widgetVar="fileDialog">
        <h:outputText value="Dialog open"/>
    </p:dialog>   
</ui:define>
    </ui:composition>
    </html>

I did and yes it works fine you are right. But i dont understand why in the other project dont work, it is almost the same. Is it something making conflict? The thing you mention about the "fileDialog.show()", how could i write a function like that in the backing bean? How can i access the dialog from it and tell it to show? — javing, Mar 30 '11 at 20:18
I just tried this: public void onRowSelect(SelectEvent event){ garbage = (Garbage)event.getObject();} on my managed bean and i called it like this: rowSelectListener="#{resultsController.onRowSelect}" But doesnt seem to work :( — javing, Mar 30 '11 at 20:32
@sfrj: It is not a good idea to keep beating on something that is not working. What I want you to do is this: now you know that my example work, so we will start from there. From my code, start putting your components into it (one component at a time though). Each time you put a component in, redeploy and see if the dialog still show up. This way we can narrow down the problem, in the mean time, I will try to take a look at your code again. — Thang Pham, Mar 30 '11 at 20:47
You are right that is what i will do Tomorrow morning. I will create a brand new page and start to add piece by piece. Also i was just going to make an update on your post to show you a print screen comparing both. I also noticed that in mine, for some reason the option selectionMode="single" looks like doesnt work. See the update. Anyway thank you very much i hope tomorrow morning i have more luck :) — javing, Mar 30 '11 at 20:54
@sfrj: i noticed on p:column, you have a `parser="string"`. I dont think p:column have that attribute. — Thang Pham, Mar 30 '11 at 21:00
Yes it does check here http://www.scribd.com/doc/36989816/Prime-Faces-Users-Guide-260710 at page 74 — javing, Mar 30 '11 at 21:02
ahhh I see. `parser` is deprecated in 2.2. Just go ahead and take out parser. Where you have `parser="string"`, what is the return type suppose to be? `garbage.fileName` sound like a String to me, `garbage.uploadDate` might not, if it is Date type, we can format it into String format. — Thang Pham, Mar 30 '11 at 21:14
I just update my code of how to convert Date type into String. If it cause too much trouble, just take out that Date type columns first. We tackle one problem at a time. — Thang Pham, Mar 30 '11 at 21:21
Yes all the variables are of type String, even date. I will try now to do it again step by step again. Ill let you know in a while. — javing, Mar 31 '11 at 07:14
Bad news, i created a page called results2.xhtml and i only used your code as we said it to be he startpoint, but it didnt work when i used the garbage items. See the Update 2. I really dont understand why is this. Should i pass to the datatable just String and List types?Maybe that works. — javing, Mar 31 '11 at 07:37
@sfrj: where is Update 2? You should be able to pass in List — Thang Pham, Mar 31 '11 at 13:34
Oh no! i didnt paste it.Sorry ill type update 2 again you will see. I used your code in a brand new page and removed all other features even paginator once and still the same result. It also still looks like the selectionMode is not single. — javing, Mar 31 '11 at 13:50
@sfrj: Do u have tomahawk component somewhere else inside your project? I remember back then PF p:dataTable does not work well with tomahawk t:dataList, but I am not sure if this issue has been fixed. can u remove the tomahawk libraries, component out of your project and see if it help? Also make sure u dont have form nested inside one another — Thang Pham, Mar 31 '11 at 14:31
@sfrj: also you miss `onRowSelectComplete="fileDialog.show()"`, not sure if this is a typos or not — Thang Pham, Mar 31 '11 at 14:48
I just rode. Yes i have tomahawk jarFile inside my lib folder. I will do now a couple of fixe and ill let you know. — javing, Mar 31 '11 at 15:27
Sorry i toke too long to reply to that last comment. I just managed to delete all tomahawk stuff from the project and also changed to onRowSelectComplete="fileDialog.show()" but i did not fix it :( I dont know i think i have to find a workaround. I thought about not using the dialog if i cant make it work from within the table. Anyway that filename needs to be a link for downloading the file so that is what i would probably do. Anyway thank you for your help. — javing, Mar 31 '11 at 18:49

JSF 2.0 can't render dialog from primefaces

1 Answers1

Linked