0

I have a jsf page that has 2 parts: a table displaying a list of records and a dialog to add a new record. I added some validation features but I can't get them to work properly. I need it to:

1) Validation error not appear the first time dialog shows up

2) If any validation error happens, keep it open and show error messages.

3) If no validation error and back-end executed successfully, update the table.

This is what I have:

<h:body>
<h:form id="form01">
    <p:dataTable id="tbl1" value="#{welcomeController.teams}" var="team" >
        <p:column headerText="Id">
            <h:outputText value="#{team.seq}" />
        </p:column>
        <p:column headerText="Name">
            <h:outputText value="#{team.name}" />
        </p:column>
    </p:dataTable>

    <p:dialog id="teamDialog" closable="false" visible="#{welcomeController.addMode}"
            widgetVar="teamDialog_w" modal="true" resizable="false" draggable="true" 
            header="New Team Detail">
        <p:messages />
        <p:panelGrid columns="2">
            <h:outputText value="Name" />
            <p:inputText id="name" value="#{welcomeController.newTeam.name}" />
        </p:panelGrid>
        <p:commandButton value="Submit" ajax="true" actionListener="#{welcomeController.addNewTeam}" 
            update=":form01"oncomplete="teamDialog_w.hide(); console.log(args);" />
    </p:dialog>

    <p:commandButton value="ADD" actionListener="#{welcomeController.startAdd}" 
            oncomplete="teamDialog_w.show(); console.log(args);" update="teamDialog" />

</h:form>

The bean:

@Named
@ConversationScoped
public class WelcomeController implements Serializable {
    private final Logger logger = LoggerFactory.getLogger(this.getClass());
    private static final long serialVersionUID = 1L;

    private List<TeamDto> teams;

    @Inject SessionManager sessionMan;
    @Inject DatabaseUtil dbCache;
    @Inject TeamService teamService;
    @Inject Conversation conversation;

    private TeamDto newTeam = new TeamDto();

    private boolean addMode = false;

    public List<TeamDto> getTeams() throws IOException {
        if (teams == null || teams.size() == 0) {
            teams = teamService.getAll();
        }
        return teams;
    }

    public void setTeams(List<TeamDto> teams) {
        this.teams = teams;
    }

    public void reload() {
        conversationBegin();
    }

    public void conversationBegin() {
        if (conversation.isTransient()) {
            conversation.begin();
        }
    }

    public void conversationEnd() {
        if(!conversation.isTransient()){
            conversation.end();
        }
    }

    public void startAdd() {
        reload();
        newTeam = new TeamDto();
        addMode = true;
    }

    public TeamDto getNewTeam() {
        return newTeam;
    }

    public void setNewTeam(TeamDto newTeam) {
        this.newTeam = newTeam;
    }

    public void addNewTeam() throws IOException, ValidatorException {
        if (newTeam.getName().isEmpty()) {
            sessionMan.addGlobalMessageFatal("INVALID INFO", null);
            return;
        }
        teamService.addTeam(newTeam);
        teams.add(newTeam);
        newTeam = new TeamDto();
        addMode = false;
    }

    public boolean isAddMode() {
        return addMode;
    }

    public void setAddMode(boolean addMode) {
        this.addMode = addMode;
    }
}

I have 2 problems here:

1) After I submit an empty string, I expect the dialog to still open (because addMode is true) but it's not. Why is it?

2) If I put the "ADD" button like this:

<p:commandButton value="ADD" actionListener="#{welcomeController.startAdd}" oncomplete="teamDialog_w.show(); console.log(args);" >
    <f:ajax render="teamDialog" />
</p:commandButton>

at least when I open the dialog again, I can see the error message. But in my code, I can't see the error message. Why is it so? Aren't they equivalent?

Is there anything wrong with my understanding?

Please help. Thank you very much.

1 Answers1

0

Dialogs should operate with their own form in JSF, this is crucial.

To prevent your dialog from closing on validation you can use in Primefaces :

if (args &amp;&amp; !args.validationFailed){PF('eventDialog').hide();}

like this:

<p:commandButton value="ADD"
            actionListener="#{welcomeController.startAdd()}"
            oncomplete="if (args &amp;&amp; !args.validationFailed){PF('teamDialog').hide();}"
            update="your_dialog_formID:messages, other_updated_IDs" />

here if (args &amp;&amp; !args.validationFailed){PF('teamDialog').hide();} you can obvoiusly add else clause and do #3 "If no validation error and back-end executed successfully, update the table."

here BalusC gives great explenation why:Keep p:dialog open when a validation error occurs after submit

Community
  • 1
  • 1
mariubog
  • 1,498
  • 15
  • 16