0

Im using primefaces version 3.1.1, Mojarra 2.1.3, Netbeans 7.0.1, Glassfish Server 3.1.

My test application is using a facelet template with top, left, content, right and bottom layout with raw divs and css. After user logs in with container managed jdbcrealm, they will be presented with the main index.html which use the said template.

I put a navigation menu on the left panel which will subsequently update center panel content with ajax upon clicking menuitem. The center panel will be updated dynamically in <ui:include> by using sessionScoped NavigationBean.

In one of the page clientList.xhtml, I put a <p:dataTable> with a button to view the detail by popping up a <p:dialog>. Im using a viewCoped bean to hold the data list displayed on the dataTable.

The problem is, when I click on the button to select a row in the last colum of every row, the dialog does not appear at all, and my p:ajaxStatus gif image kept on rolling unendingly. When I debug the program with netbeans, I notice the constructor is called again and the previous instance is gone after clicking the button.

This is my index.xhtml using facelets template.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/BySalesAutomationTemplate.xhtml">
    <ui:define name="title">
        <h:outputText value="Facelet Index Page"></h:outputText>
    </ui:define>
    <ui:define name="top">
        TOP
    </ui:define>
    <ui:define name="left">
        <ui:include src="users/menu#{request.isUserInRole('ADMIN') ? 'Admin' : 'User'}.xhtml" />
    </ui:define>
    <ui:define name="right">
        <h:outputText value="Cuba2 daan"></h:outputText>
    </ui:define>
    <ui:define name="maincontent">
        <c:if test="#{navigationBean.page!=null}">
            <ui:include src="#{navigationBean.page}.xhtml" />
        </c:if>
    </ui:define> 
    <ui:define name="bottom">
        <center>2012</center> 
    </ui:define>
  </ui:composition>
</html>

This is the clientList.xhtml page which is displayed in the center panel of my index.xhtml upon clicking a link on the menu in the left panel.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Client Listing</title>
</h:head>
<h:body>
    <p>Client List</p>
    <h:form>
        <h:commandButton action="#{authBackingBean.logout}" value="Logout" />
    </h:form>
    <f:view>
        <h:form id="formdetail" prependId="false">
            <p:ajaxStatus>
                <f:facet name="start">
                    <h:graphicImage value="images/loading.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>
            <p:growl id="growl" showDetail="true"/>
            <p:dataTable id="dtClientList" value="#{saClientController.lazyModel}" rowsPerPageTemplate="10,20,30,50" 
                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
                         paginatorAlwaysVisible="false" var="item" paginator="true" rows="10">
                <f:facet name="header">
                    <h:outputText value="Client List"/>
                </f:facet>
                <p:column filterBy="#{item.idSaClient}">
                    <f:facet name="header">
                        <h:outputText value="IdSaClient"/>
                    </f:facet>
                    <p:commandLink action="#{saClientController.showDetails(item)}" value="#{item.idSaClient}" target=":maincontent"/>                        
                </p:column>
                <p:column filterBy="#{item.saClientName}">
                    <f:facet name="header">
                        <h:outputText value="saClientName"/>
                    </f:facet>
                    <h:outputText value="#{item.saClientName}"/>
                </p:column>
                <p:column filterBy="#{#item.saClientAddress}">
                    <f:facet name="header">
                        <h:outputText value="SaClientAddress"/>
                    </f:facet>
                    <h:outputText value="#{item.saClientAddress}"/>
                </p:column>
                <p:column style="width:40px">  
                    <h:panelGrid columns="3" styleClass="actions" cellpadding="2">  
                        <p:commandButton id="selectButton" update=":formdetail:display" oncomplete="clientDialog.show()" icon="ui-icon-search" title="View">                                  
                            <f:setPropertyActionListener value="#{item}" target="#{saClientController.selectedSaClient}" />  
                        </p:commandButton>  
                    </h:panelGrid>  
                </p:column>  
                <f:facet name="footer">
                    <h:outputText value="Client List"/>
                </f:facet>
            </p:dataTable>                      
        </h:form>

        <p:dialog id="clientDialog" header="Client Detail" widgetVar="clientDialog" resizable="false" showEffect="explode" hideEffect="explode">
            <h:panelGrid id="display" columns="2" cellpadding="4"> 
                 <f:facet name="header"> 
                     <h:outputText value="Selected Row" />
                 </f:facet> 
                 <h:outputText value="ID" />
                 <h:outputText value="#{saClientcontroller.selectedSaClient.idSaClient}" />
                 <h:outputText value="NAME:" /> 
                 <h:outputText value="#{saClientcontroller.selectedSaClient.saClientName}" /> 
                 <h:outputText value="DESCRIPTION:" />  
                 <h:outputText value="#{saClientcontroller.selectedSaClient.saClientAddress}" />  
             </h:panelGrid>
        </p:dialog>                   

    </f:view>
  </h:body>
</html>

This is my Backing Bean.

public class SaClientController implements Serializable {

    @EJB
    private SaClientFacade saClientFacade;
    private SaClient selectedSaClient;
    private LazyDataModel<SaClient> lazyModel;
    private List<SaClient> saclients;

    /** Creates a new instance of SaClientController */
    public SaClientController() {
    }

    @PostConstruct
    public void Init() {
        saclients = saClientFacade.Retrieve();
        lazyModel = new LazyDataModelImp(saclients);
    }

    public LazyDataModel<SaClient> getLazyModel() {
        return lazyModel;
    }

    public List<SaClient> getClients() {
        return saClientFacade.Retrieve();
    }

    public SaClient getDetails() {
        return selectedSaClient;
    }

    public String showDetails(SaClient selectedSaClient) {
        this.selectedSaClient = selectedSaClient;
        return "DETAILS";
    }

    public String update() {
        System.out.println("###UPDATE###");
        selectedSaClient = saClientFacade.Update(selectedSaClient);
        return "SAVED";
    }

    public String list() {
        System.out.println("###LIST###");
        return "LIST";
    }

    public SaClient getSelectedSaClient() {
        return selectedSaClient;
    }

    public void setSelectedSaClient(SaClient selectedSaClient) {
        this.selectedSaClient = selectedSaClient;
    }

    public String dummyAction()
    {
        return null;
    }
}

This is the LazyModelImp class

public class LazyDataModelImp extends LazyDataModel<SaClient> {

    private List <SaClient> datasource;

    public LazyDataModelImp(List<SaClient> datasource) {
        this.datasource = datasource;
    }

    @Override
    public SaClient getRowData(String rowKey) {
        for (SaClient saclient : datasource) {
            if (saclient.getIdSaClient().toString().equals(rowKey)) {
                return saclient;
            }
        }
        return null;
    }

    @Override
    public Object getRowKey(SaClient saclient) {
        return saclient.getIdSaClient().toString();
    }

    @Override
    public List<SaClient> load(int first, int pageSize, String sortField, SortOrder sortOrder, Map<String, String> filters) {
        List<SaClient> data = new ArrayList<SaClient>();
        //filter        
        for (SaClient saclient : datasource) {
            boolean match = true;
            for (Iterator<String> it = filters.keySet().iterator(); it.hasNext();) {
                try {                    
                    String filterProperty = it.next();
                    String filterValue = filters.get(filterProperty);
                    String fieldValue = String.valueOf(saclient.getFilterSortFieldValue(filterProperty));
                    if (filterValue == null || fieldValue.startsWith(filterValue.toUpperCase()) || fieldValue.startsWith(filterValue.toLowerCase())) {
                        match = true;
                    } else {
                        match = false;
                        break;
                    }
                } catch (Exception e) {
                    match = false;
                }
            }
            if (match) {
                data.add(saclient);
            }
        }
        //rowCount
        int dataSize = data.size();
        this.setRowCount(dataSize);
        //paginate
        if (dataSize > pageSize) {
            try {
                return data.subList(first, first + pageSize);
            } catch (IndexOutOfBoundsException e) {
               return data.subList(first, first + (dataSize % pageSize));
            }
        }
        else {
            return data;
        }
        //sort
        //if (sortField != null) {
        //    Collections.sort(data, new LazySorter(sortField, sortOrder));
        //}       
        //return data;
    }
}

I've already disabled the partial state saving in web.xml.

<context-param> 
    <param-name>javax.faces.PARTIAL_STATE_SAVING</param-name> 
    <param-value>false</param-value> 
</context-param> 

The backingBean is reinitialized the first time I click on the view detail commandButton in the last column of the dataTable in clienList.xhtml. And the dialog does not display at all. But after pressing F5. The dialog can be displayed but without any content, the only thing displayed in the dialog is the label outputText but not the bean values, they are empty. Sorry for newbie question. I will be extremely glad if anyone could advise what im doing is wrong, and maybe a little advise on the navigation and whether my strategy of displaying everything in index.xhtml (so I only have 1 view id all the time which is index.xhtml, right?) is right.

frazkok
  • 49
  • 1
  • 2
  • 11
  • 3
    Wow... this is too much. Next time please try to include only code and configurations directly related to the problem you are experiencing. If this is impossible try to reproduce the issue in a test page. – maple_shaft Feb 29 '12 at 18:37
  • Thanks maple_shaft. Sorry... I just want to put everything in for detail information. I'll put shorter version next time. Btw, What do you think of my solution to have only /index.xhtml displayed in the browser all the time. And only the center panel content is being updated by dynamically including other xhtml pages? Is it ok? – frazkok Mar 01 '12 at 00:53
  • This is a common solution and others have used this. Since you are already using Primefaces, you might benefit from the use of the Primefaces Layout template. http://www.primefaces.org/showcase/ui/layoutHome.jsf – maple_shaft Mar 01 '12 at 11:55
  • Good morning @BalusC, I'm hoping you could tell me which part of my code is causing the issue. TQ – frazkok Mar 02 '12 at 03:21
  • When I run only clientList.xhtml without using the template, it runs on its own. It runs good. But when I put the clientList.xhtml dynamically (using ) into index.xhtml with divs css layouting then I get the erratic behaviour described earlier. I have already turned off the partial state saving. What could be causing the problem? Please help... – frazkok Mar 03 '12 at 02:24
  • Did you try using the PrimeFaces layout instead of facet template? Primefaces dialog looks to be incompatible with facet templates, perhaps it is compatible with PrimeFaces layout which is built on facet templates? – maple_shaft Mar 03 '12 at 02:51
  • Ok. But I read somewhere that using primefaces layout and layoutUnit makes scrolling of large dataTable particularly slow. And I do not wish to be confined to only the predefined layout given. Anyway I'll give it a shot. TQ – frazkok Mar 03 '12 at 03:33

1 Answers1

0

This may be the issue with your PrimeFaces dialog that you have an h:form surrounding the p:dialog. I have noticed the PrimeFaces dialog does not work properly when a child of a form element.

Try placing this dialog form inside of the contents of the dialog.

<p:dialog id="clientDialog" header="Client Detail" widgetVar="clientDialog" resizable="false" showEffect="explode" hideEffect="explode">
  <h:form id="formdialog" prependId="false">
    <h:panelGrid id="display" columns="2" cellpadding="4">
    ...
maple_shaft
  • 10,435
  • 6
  • 46
  • 74
  • Hi maple_shaft, any other suggestions? – frazkok Mar 01 '12 at 12:54
  • @frazkok I might try the Primefaces layout just to see if that makes a difference, but it probably doesn't matter. I suggest trying to narrow down the problem. Create a test page with JUST a datatable and the dialog and see if you can recreate the problem with less code. If so then keep removing unnecessary code from the managed beans until the problem goes away. This will give you clues to where the problem lies. Right now I don't see anything else that looks incorrect but I may be missing something because there is so much code. – maple_shaft Mar 01 '12 at 13:07
  • ... ALSO, I suggest refactoring your forms for `prependId="true"`. There might be a DOM id conflict that is causing problems. You will have to update the client ids listed in `update` attributes throughout the page if you do this. Prepending the form id to the component id is generally safer and is considered better practice. – maple_shaft Mar 01 '12 at 13:09
  • Hi @maple_shaft. I have changed the page view to clientList.xhtml only without using facelet template. And yes it worked. Any idea why is it like that? – frazkok Mar 02 '12 at 10:44
  • @frazkok I am glad that you have figured out the problem. I am not entirely sure why this is but it has to do with how the Primefaces dialog was implemented. If you are using version 2.2.1 or below then it was built on top of jQuery UI dialog which moves some DOM elements outside of the parent container. This was known to cause incompatibilities when used within facets. – maple_shaft Mar 02 '12 at 11:59
  • Yeah, but I wish to do it using index.xhtml with facelet templating. It's a bit confusing. – frazkok Mar 03 '12 at 02:25