Modal dialog not showing on PrimeFaces 5

Question

I´m a beginner java developer, and I´m trying to get a basic CRUD running on PrimeFaces 5.2 on top of a project I already had on Hibernate 5. The table shows ok, but the modal dialog doesn´t show when I click any of the buttons. I´ve tried many things from around the web but everything seems to be ok, so I´m really stuck.

I really appreciate any light you can shed on this. Thank you!

index.html

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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:p="http://primefaces.org/ui">
<h:head>
    <title>Gerenciador de Tarefas</title>
</h:head>
<h:body>
    <p:layout fullPage="true">
        <p:layoutUnit position="north" width="200" header="Atividades" resizable="true" closable="true" collapsible="true">
            <h:form prependId="false">
                <p:commandLink value="Nova Tarefa" actionListener="#{tarefaController.prepararAdicionarTarefa}" update="infosTarefa" oncomplete="dialogGerTarefa.show()"/>
            </h:form>
        </p:layoutUnit>

        <p:layoutUnit position="center">
            <h1>Gerenciador de Tarefas</h1>
            <br/>
            <h:form prependId="false">
                <p:dataTable id="tabela" var="tarefa" value="#{tarefaController.listarTarefas}">
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Título"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.titulo}" />
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Prazo de execução"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.prazo_execucao}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Detalhes"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.detalhes}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Responsável"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.responsavel}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Urgente"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.urgente}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Status"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.status}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Data de conclusao"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.data_conclusao}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Descricao da conclusao"/>
                        </f:facet>
                        <h:outputText value="#{tarefa.descricao_conclusao}"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Alterar"/>
                        </f:facet>
                        <p:commandButton actionListener="#{tarefaController.prepararAlterarTarefa}" ajax="false" value="Alterar" update="infosTarefa" oncomplete="dialogGerTarefa.show()"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Excluir"/>
                        </f:facet>
                        <h:commandLink action="#{tarefaController.excluirTarefa}" value="Excluir"/>
                    </p:column>
                </p:dataTable>
            </h:form>
        </p:layoutUnit>
    </p:layout>

    <p:dialog header="Gerencia de Tarefa" widgetVar="dialogGerTarefa"  resizable="false" modal="true"  width="500">
        <h:form prependId="false">
            <h:panelGrid id="infosTarefa" columns="2" style="margin-bottom:10px">

                <h:outputLabel for="titulo" value="Título:" />
                <h:inputText id="titulo" value="#{tarefaController.tarefa.titulo}"/>

                <h:outputLabel for="prazo_execucao" value="Prazo de execução:" />
                <h:inputText id="prazo_execucao" value="#{tarefaController.tarefa.prazo_execucao}"/>

                <h:outputLabel for="detalhes" value="Detalhes:" />
                <h:inputText id="detalhes" value="#{tarefaController.tarefa.detalhes}"/>

                <h:outputLabel for="responsavel" value="Responsavel:" />
                <h:inputText id="responsavel" value="#{tarefaController.tarefa.responsavel}"/>

                <h:outputLabel for="urgente" value="Urgente:" />

                <h:selectOneMenu id="urgente" value="#{tarefaController.tarefa.urgente}">
                    <f:selectItem itemLabel="nao" itemValue="0"/>
                    <f:selectItem itemLabel="sim" itemValue="1"/>
                </h:selectOneMenu>

                <h:outputLabel for="status" value="Status:" />
                <h:inputText id="status" value="#{tarefaController.tarefa.status}"/>

                <h:outputLabel for="data_conclusao" value="Data de conclusao:" />
                <h:inputText id="data_conclusao" value="#{tarefaController.tarefa.data_conclusao}"/>

                <h:outputLabel for="descricao_conclusao" value="Descricao da conclusao:" />
                <h:inputText id="descricao_conclusao" value="#{tarefaController.tarefa.descricao_conclusao}"/>

                <p:commandButton update="tabela" oncomplete="dialogGerTarefa.hide();" actionListener="#{tarefaController.adicionarTarefa}" value="Inserir Tarefa"/>
                <p:commandButton update="tabela" oncomplete="dialogGerTarefa.hide();" actionListener="#{tarefaController.alterarTarefa}" value="Alterar Tarefa"/>

            </h:panelGrid>
        </h:form>
    </p:dialog>

</h:body>

tarefaController.java

package br.com.listadetarefas.controller;

import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;
import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;

import br.com.listadetarefas.jpa.TarefaDao;
import br.com.listadetarefas.model.Tarefa;

@ManagedBean
@SessionScoped
public class TarefaController {

    private Tarefa tarefa;
    private DataModel listaTarefas;

    public DataModel getListarTarefas() {
        List<Tarefa> lista = TarefaDao.listaTarefasComFiltro("Todas");
        listaTarefas = new ListDataModel(lista);
        return listaTarefas;
    }

    public Tarefa getTarefa() {
        return tarefa;
    }

    public void setTarefa(Tarefa tarefa) {
        this.tarefa = tarefa;
    }

    public void prepararAdicionarTarefa(ActionEvent actionEvent) {
        tarefa = new Tarefa();
    }

    public void prepararAlterarTarefa(ActionEvent actionEvent) {
        tarefa = (Tarefa) (listaTarefas.getRowData());
    }

    public String excluirTarefa() {

        Tarefa tarefaTemp = (Tarefa) (listaTarefas.getRowData());
        TarefaDao.remove(tarefaTemp.getId());
        return "index";

    }

    public void adicionarTarefa(ActionEvent actionEvent) {

        TarefaDao.adiciona(tarefa);

    }

    public void alterarTarefa(ActionEvent actionEvent) {

        TarefaDao.resolve(tarefa);

    }

}

tarefa.java

package br.com.listadetarefas.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class Tarefa {

    @Id
    @GeneratedValue
    private int id;

    private String titulo;
    private String prazo_execucao;
    private String detalhes;
    private String responsavel;
    private boolean urgente;
    private String status;
    private String data_conclusao;
    private String descricao_conclusao;

    public Tarefa() {
        this.status = "aberta";
    }

    public String getTitulo() {
        return titulo;
    }
    public void setTitulo(String titulo) {
        this.titulo = titulo;
    }
    public String getPrazo_execucao() {
        return prazo_execucao;
    }
    public void setPrazo_execucao(String prazo_execucao) {
        this.prazo_execucao = prazo_execucao;
    }
    public String getDetalhes() {
        return detalhes;
    }
    public void setDetalhes(String detalhes) {
        this.detalhes = detalhes;
    }
    public String getResponsavel() {
        return responsavel;
    }
    public void setResponsavel(String responsavel) {
        this.responsavel = responsavel;
    }
    public boolean isUrgente() {
        return urgente;
    }
    public void setUrgente(boolean urgente) {
        this.urgente = urgente;
    }
    public String getStatus() {
        return status;
    }
    public void setStatus(String status) {
        this.status = status;
    }
    public String getData_conclusao() {
        return data_conclusao;
    }
    public void setData_conclusao(String data_conclusao) {
        this.data_conclusao = data_conclusao;
    }
    public String getDescricao_conclusao() {
        return descricao_conclusao;
    }
    public void setDescricao_conclusao(String descricao_conclusao) {
        this.descricao_conclusao = descricao_conclusao;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
}

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

I looks to me as the main problem is ajax="false" on the commandButton. Remove that. There is no oncomplete-callback when you do a full request (only with ajax).

Also replace dialogGerTarefa.show() with PF('dialogGerTarefa').show() (and similar for hide()). The first is an old syntax.

Also I'd remove prependId="false" everywhere. More reading. You'd have to give the form in the dialog a fixed id, and update with for example update=":dialogformid:infosTarefa" (well you might as well just do update=":dialogformid").

edited May 23 '17 at 12:07

Community

1
1

answered May 16 '16 at 19:17

Jaqen H'ghar

4,305
2
14
26

Ok, it worked! =D Only the prependId="false" actually broke the code, I think... Without that it worked flawlessly, thank you very much! – Tomaz Fernandes May 16 '16 at 19:39
If I can ask you one more thing, I was actually trying to display that first layout unit on the "left" position, but it won´t render. Is there anything wrong, besides changing to layoutUnit position="left" ? – Tomaz Fernandes May 16 '16 at 19:48
1

Great :-) You might as well use more primefaces components, since you include it anyway.. for example selectOneMenu, commandLink. They are only better and with more options. And maybe change to CDI beans, if your server supports. But thats just optionals – Jaqen H'ghar May 16 '16 at 19:48
1

I think its called west – Jaqen H'ghar May 16 '16 at 19:50
1

Yep see the showcase: http://www.primefaces.org/showcase/ui/panel/layout/element.xhtml – Jaqen H'ghar May 16 '16 at 19:51

Modal dialog not showing on PrimeFaces 5

1 Answers1