0

i have a problem with a primefaces panel not being updated by a dialog. Here is the code:

I am using a templete with <ui:composition> tags. Here is the template:

<h:body style="margin: 0px;">
<p:panel styleClass="menubar-panel">
    <h:form id="menu-bar-form-id" style="width: 100%">
        <div id="top" class="top">
            <p:menubar>
                <p:menuitem value="Cursuri" url="#" styleClass="menubar" />
                <p:submenu label="#{homeBean.currentUser.usrFirstName}"
                    icon="fa fa-fw fa-user" style="float:right">
                    <p:menuitem value="Posteaza Curs" url="/uploadCourse.xhtml"
                        rendered="#{true}" styleClass="menubar" />
                    <p:menuitem value="Facturile Mele" url="#" styleClass="menubar" />
                    <p:menuitem value="Contul Meu" url="/account.xhtml"
                        styleClass="menubar" />
                    <p:menuitem value="Logout" action="#{loginBean.logOut}"
                        styleClass="menubar" />
                </p:submenu>
            </p:menubar>
        </div>


        <div id="content" class="content">
            <ui:insert name="content">Content Section</ui:insert>
        </div>
    </h:form>
</p:panel>
</h:body>

Inside the content div i have a panel that nests a datatable and outside the panel i have a dialog that adds data to that datatable:

<p:panel id="module_panel_id" header="Adauga module">
            <p:messages />
            <p:dataTable var="modul" value="#{uploadCourseBean.modul}">
                <p:column headerText="Modul">
                    <h:outputText value="#{modul.modTitle}" />
                </p:column>

                <p:column headerText="Lectie">
                    <p:dataList value="#{modul.lectii}" var="lectie" type="ordered">
                          #{lectie.lesTitle}
                            <p:commandButton icon="ui-icon-trash" type="button">
                            <p:ajax event="click"
                                listener="#{uploadCourseBean.selectCurrentLesson(lectie)}"
                                update="dialog_lectie_id"
                                oncomplete="PF('lectieDialog').show();" />
                        </p:commandButton>
                        <p:panel header="Task-uri">
                            <p:dataList id="task_datalist_id" value="#{lectie.tasks}"
                                var="task" type="ordered">
                                 #{task.tskTitle}
                            </p:dataList>
                        </p:panel>
                    </p:dataList>
                </p:column>

                <p:column>
                    <p:commandButton value="Adauga lectie" update="lessons"
                        onclick="PF('lectieDialog').show()" type="button">
                        <p:ajax event="click"
                            listener="#{uploadCourseBean.selectCurrentModule(modul)}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
            <p:commandButton value="Modal" type="button"
                onclick="PF('dlg2').show();" />

        </p:panel>

I update this panel using a modal dialog.

<p:dialog id="dialog_lectie_id" header="Lectie"
            widgetVar="lectieDialog" modal="true">
            <h:panelGrid id="lectie_update_panel" columns="3"
                columnClasses="label, value">
                <h:outputText value="Titlu: *" />
                <p:inputText value="#{uploadCourseBean.lectieToAdd.lesTitle}"
                    label="Titlu lectie" />
                <p:spacer />

                <h:outputText value="Video link: *" />
                <p:inputText value="#{uploadCourseBean.lectieToAdd.lesVideoLink}"
                    label="Video link" />
                <p:spacer />

                <h:outputText value="Thumbnail: * " />
                <p:fileUpload value="#{uploadCourseBean.modulThumbnail}"
                    mode="simple" skinSimple="true"
                    allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
                <p:spacer />

                <h:outputText value="Task-uri: * " />
                <p:dataList id="lectii_datalist_id"
                    value="#{uploadCourseBean.lectieToAdd.tasks}" var="task"
                    type="ordered">
                          #{task.tskTitle}    
                         <p:commandButton icon="ui-icon-trash"
                        actionListener="#{uploadCourseBean.removeTask(task)}"
                        update="lectii_datalist_id" />
                </p:dataList>
                <p:commandButton value="Adauga task"
                    update="module_panel_id @parent" onclick="PF('taskDialog').show()"
                    type="button">
                    <!--                        <p:ajax event="click" -->
                    <!--                            listener="#{uploadCourseBean.selectCurrentModule(modul)}" /> -->
                </p:commandButton>

                <p:commandButton id="btn_add_lectie" value="Adauga lectie"
                    update="module_panel_id @parent"
                    action="#{uploadCourseBean.createNewLectie}"
                    onclick="PF('lectieDialog').hide();">
                </p:commandButton>
            </h:panelGrid>
        </p:dialog>

The problem i am facing is the "update" attribute on the ajax event in the panel. If i remove the attribute, the panel gets updated (data gets added and displayed to the datatable). If i leave it there, it does not (data gets added in the list but does not show up in the datatable.

Here is the backing bean:

package com.conneqtlife.edu.managedbean;

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

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.event.FlowEvent;
import org.primefaces.model.UploadedFile;
import org.springframework.stereotype.Component;

import com.conneqtlife.edu.model.Curs;
import com.conneqtlife.edu.model.Lectie;
import com.conneqtlife.edu.model.Modul;
import com.conneqtlife.edu.model.Task;

@Component("uploadCourseBean")
public class UploadCourse implements Serializable {

    private static final long serialVersionUID = 1L;

    private Curs curs = new Curs();
    private List<Modul> modul = new ArrayList<Modul>();
    private Modul modulToAdd = new Modul();
    private Modul selectedModul = new Modul();
    private UploadedFile cursThumbnail;
    private UploadedFile modulThumbnail;

    private List<Lectie> lectii = new ArrayList<Lectie>();
    private Lectie lectieToAdd = new Lectie();

    private Task taskToAdd = new Task();

    public UploadCourse() {
    }

    public Task getTaskToAdd() {
        return taskToAdd;
    }

    public void setTaskToAdd(Task taskToAdd) {
        this.taskToAdd = taskToAdd;
    }

    public Modul getSelectedModul() {
        return selectedModul;
    }

    public void setSelectedModul(Modul selectedModul) {
        this.selectedModul = selectedModul;
    }

    public List<Lectie> getLectii() {
        return lectii;
    }

    public void setLectii(List<Lectie> lectii) {
        this.lectii = lectii;
    }

    public Lectie getLectieToAdd() {
        return lectieToAdd;
    }

    public void setLectieToAdd(Lectie lectieToAdd) {
        this.lectieToAdd = lectieToAdd;
    }

    public Curs getCurs() {
        return curs;
    }

    public void setCurs(Curs curs) {
        this.curs = curs;
    }

    public List<Modul> getModul() {
        return modul;
    }

    public void setModul(List<Modul> modul) {
        this.modul = modul;
    }

    public Modul getModulToAdd() {
        return modulToAdd;
    }

    public void setModulToAdd(Modul modulToAdd) {
        this.modulToAdd = modulToAdd;
    }

    public UploadedFile getCursThumbnail() {
        return cursThumbnail;
    }

    public void setCursThumbnail(UploadedFile cursThumbnail) {
        this.cursThumbnail = cursThumbnail;
    }

    public UploadedFile getModulThumbnail() {
        return modulThumbnail;
    }

    public void setModulThumbnail(UploadedFile modulThumbnail) {
        this.modulThumbnail = modulThumbnail;
    }

    public void save() {
        FacesMessage msg = new FacesMessage("Successful", "Welcome :");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public String onFlowProcess(FlowEvent event) {
        return event.getNewStep();
    }

    public void upload() {
        if (cursThumbnail != null) {
            FacesMessage message = new FacesMessage("Successful", cursThumbnail.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage msg = new FacesMessage("Successful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }

    public void createNew() {
        if (modul.contains(modulToAdd)) {
            FacesMessage msg = new FacesMessage("Dublicated", "This module has already been added");
            FacesContext.getCurrentInstance().addMessage(null, msg);
        } else {
            modulToAdd.setLectii(new ArrayList<Lectie>());
            modul.add(modulToAdd);
            modulToAdd = new Modul();
        }
    }

    public void createNewLectie() {
        Modul selectedModul = new Modul();

        for (Modul modul : modul) {
            if (modul.getModTitle().equals(this.selectedModul.getModTitle())) {
                selectedModul = modul;
            }
        }

        if (lectii.contains(lectieToAdd)) {
            FacesMessage msg = new FacesMessage("Dublicated", "This module has already been added");
            FacesContext.getCurrentInstance().addMessage(null, msg);
        } else {
            selectedModul.getLectii().add(lectieToAdd);
            lectieToAdd = new Lectie();
        }
    }

    public void createNewTask() {
        if (lectieToAdd.getTasks() == null) {
            lectieToAdd.setTasks(new ArrayList<Task>());
        }
        
        lectieToAdd.getTasks().add(taskToAdd);
        taskToAdd = new Task();

    }

    public void selectCurrentModule(Modul module) {
        this.selectedModul = module;
    }
    
    public void selectCurrentLesson(Lectie lectie) {
        this.lectieToAdd = lectie;
        
//      RequestContext context = RequestContext.getCurrentInstance();
//      context.update("dialog_lectie_id");
//      context.execute("PF('lectieDialog').show();");
    }
    
    public void removeTask(Task task) {
        try {
            for (int i = 0; i <= lectieToAdd.getTasks().size(); i++) {
                if (lectieToAdd.getTasks().get(i).getTskTitle().equals(task.getTskTitle())) {
                    lectieToAdd.getTasks().remove(i);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

I am using Primefaces 6.2, Tomcat 7 and JSF2.2.

What is the problem here? What am i missing?

Any help is greatly appreciated. Thanks!

Drey
  • 33
  • 1
  • 6
  • I'm not sure about your description being unclear or the problem being weird, but 1: Always state version info. 2: there is no dialog (or form) so always create a [mcve] and 3: read https://stackoverflow.com/questions/19737674/primefaces-commandbutton-does-not-work – Kukeltje Jul 31 '20 at 07:05
  • Hey, thank you for the answer. I updated my question with more information. Hope this helps. If not, please tell me what i can provide you with for further assistance. Thank you! – Drey Jul 31 '20 at 07:22
  • 2
    I'm pretty sure this is not a [mcve]. Or are you saying that removing the fileIUpload makes it work? Or the datatable? Or the datalist... the 'minimal' has a reason... And reproducible too. (this does not compile at all on my side). And did you read the link I added? Also read #1 in https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value – Kukeltje Jul 31 '20 at 07:37
  • I am saying that removing the update attribute from this: `p:ajax event="click" listener="#{uploadCourseBean.selectCurrentLesson(lectie)}" update="dialog_lectie_id" oncomplete="PF('lectieDialog').show();" />` makes it work. – Drey Jul 31 '20 at 07:41
  • 2
    Yes I understand what you are saying and I'm helping you get to the cause of the problem by providing information. But if there is too much irrelevant code, I need to spend too much time wading through it. Not always a problem with 1 question but if you, like I do, try to help with many, it is a waste of time. Dit you read the links I posted? About ajax (implicit or explitict) and `type="button"`? And also read https://stackoverflow.com/questions/15267958/pcommandbutton-vs-hcommandbutton. I think you need to take a step back and learn some of the basics about the technologies you use. – Kukeltje Jul 31 '20 at 07:55

0 Answers0