0

I have a set of p:accordionPanel's that I wish to update in my JSF 2.2 page.

The first one lists items of the list as tabs, in the tab it shows the name of the list item plus a button to delete that item. Clicking delete correctly removes the item and updates the panel via ajax

When all items have been removed it will render a new accordion panel informing the user there are no items and one needs to be added.

This all works fine, however when a new item is added is should once again render the first accordion panel showing the item with the option to remove it.

I believe the following is Minimal, Complete and Verifiable (if not please let me know why not)

The xHTML

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Forms</title>
</h:head>
<h:body>
    <h:form id="mainForm">
        <p:outputPanel id="panelContainer">
            <p:accordionPanel id="formsPanel" value="#{formController.forms}"
                var="formInstance" rendered="#{not empty formController.forms}">
                <p:tab title="#{formInstance.name}">
                    <p:panelGrid columns="3" layout="grid">
                        <h:outputLabel for="name" value="Form name:" />
                        <h:outputText id="name" value="#{formInstance.name}" />
                        <p:commandButton
                            action="#{formController.deleteForm(formInstance.name)}"
                            value="Delete form" update=":mainForm:panelContainer" />
                    </p:panelGrid>
                </p:tab>
            </p:accordionPanel>
            <p:accordionPanel id="addFormPanel"
                rendered="#{empty formController.forms}">
                <p:tab title="No forms added yet, please add some">
                    <h:form>
                        <p:panelGrid columns="3" layout="grid">
                            <h:outputLabel value="Form name:" />
                            <p:inputText value="#{formController.form.name}" required="true"
                                label="text" />
                            <p:commandButton update=":mainForm:panelContainer"
                                action="#{formController.createForm}" value="Add form" />
                        </p:panelGrid>
                    </h:form>
                </p:tab>
            </p:accordionPanel>
        </p:outputPanel>
    </h:form>
</h:body>
</html>

The Form

public class Form implements Serializable
{

    private String name;

    public Form()
    {

    }

    public Form(String name)
    {
        this.name = name;
    }

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

}

And the FormController

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.view.ViewScoped;
import javax.inject.Named;

@Named
@ViewScoped
public class FormController implements Serializable
{

    private static List<Form> forms;

    {
        forms = new ArrayList<>();
        forms.add(new Form("Form 1"));
        forms.add(new Form("Form 2"));
    }

    private Form form = new Form();

    public void createForm()
    {
        forms.add(form);
        form = new Form();
    }

    public void deleteForm(String name)
    {
        for(int i=0; i < forms.size(); i++)
        {
            Form form = forms.get(i);
            if (form.getName().equals(name))
            {
                forms.remove(i);
            }
        }
    }

    public List<Form> getForms()
    {
        return forms;
    }

    public Form getForm()
    {
        return form;
    }

}
PDStat
  • 5,513
  • 10
  • 51
  • 86
  • Treat all cases separately. Try to get to the cause of the problem of the first `p:accordionPanel` with.... an [mcve] – Kukeltje Dec 08 '15 at 08:53
  • @Kukeltje thanks, I've updated with an example, hopefully MCVE – PDStat Dec 08 '15 at 11:45
  • It comes very close... good work ;-). The problem most likely is a duplicate of http://stackoverflow.com/questions/7371903/using-multiple-hform-in-a-jsf-page. Nested forms not being allowed – Kukeltje Dec 08 '15 at 14:20
  • 1
    Off-topic: 'static' property for forms? And you could have found the relation with the nested form if you went further in removing things (making it even more minimal)... It suddenly would have started working – Kukeltje Dec 08 '15 at 14:54
  • 1
    Can you try with 1.autoUpdate="true" on the outputPanel 2. ajax="false" on commandButton and 3. update=":mainForm" on commandButton please – Mahendran Ayyarsamy Kandiar Dec 08 '15 at 17:52
  • Thanks both, it was a combination of creating the correct form structure (not nesting them) and getting the correct id's of the components to update. – PDStat Dec 09 '15 at 15:49

0 Answers0