How do I update/reload beans server side after ajax events?

Question

I'm trying to set up a Timeline (primefaces element), to display an agenda. Each line is a colleague, with an object "Identite" I created. Each event is an object "EventPlanning" I created as well, only associated with one person, therefore on a single line.

Identite & EventPlanning objects are read from a mySQL base, with associated two tables.

On my timeline, I implemented a way to create a new event, then to persist it in the table. Problem is, I can't find how to update the timeline server side, even following this example : https://www.primefaces.org/showcase/ui/data/timeline/editServer.xhtml?jfwid=3715a

What's happening :

• User Interface is properly updated, but anybody connecting from an other computer will not see newly added events.
• New event is properly created and inserted into DB, but it needs a new launch of the application on the server to see it everywhere.

Here is the main xhtml page :

    <div class="card">
        <h:form id="form">
            <p:growl id="growl" showSummary="true" showDetail="true" keepAlive="true" life="3000">
                <p:autoUpdate/>
            </p:growl>
        
                <p:timeline id="timeline" styleClass="friseChrono" value="#{friseTemporelle.model}"
                            editable="true" eventMargin="10" eventMarginAxis="0"
                            start="#{friseTemporelle.start}" end="#{friseTemporelle.end}"
                            stackEvents="false" zoomMin="#{friseTemporelle.zoomMin}"
                            zoomMax="#{friseTemporelle.zoomMax}">                    
                    <p:ajax event="add" update="newEventInner"
                            listener ="#{friseTemporelle.onAdd}"
                            oncomplete="PF('newEventWdgt').show()"/>
                    <p:ajax event="changed" listener ="#{friseTemporelle.onChanged}"/>
                    <p:ajax event="edit" listener ="#{friseTemporelle.onEdit}"/>
                    <p:ajax event="delete" listener ="#{friseTemporelle.onDelete}"/>
                    <p:ajax event="select" listener ="#{friseTemporelle.onSelect}"/>
                    <p:ajax event="rangechanged" listener ="#{friseTemporelle.onRangeChanged}"/>
                    <p:ajax event="lazyload" listener ="#{friseTemporelle.onLazyLoad}"/>
                </p:timeline>
            
            
                <p:dialog id="newEventDlg" header ="Ajouter nouveau" widgetVar="newEventWdgt">
                    <h:panelGroup id="newEventInner" layout="block">
                        <h:panelGrid columns="2" columnClasses="newColonne1,newColonne2">
                            <h:outputText value="Position" />
                            <p:inputText value="#{friseTemporelle.currentEvent.data.valeur}"
                                         rendered="#{not empty friseTemporelle.currentEvent}"
                                         required="true" label="Position"/>
                        </h:panelGrid>
                    </h:panelGroup>
                
                    <f:facet name="footer">
                        <h:panelGroup layout="block" style="text-align:right; padding:2px; white-space:nowrap;">
                            <p:commandButton value ="Save" process="newEventDlg" update="@none"
                                             action="#{friseTemporelle.saveNewEvent}"
                                             oncomplete="if(!args.validationFailed){PF('newEventWdgt').hide();}"/>
                            <p:commandButton type="button" value="Close" onclick="PF('newEventWdgt').hide()"/>
                        </h:panelGroup>
                    </f:facet>
                </p:dialog>
        </h:form>
    </div>

---

Here is the class FriseTemporelle I use to implement a timeline as a bean :

---

@Named
@ViewScoped
public class FriseTemporelle implements Serializable {
private TimelineModel<EventPlanning,Identite> model;
private LocalDateTime start, end;
private long zoomMin, zoomMax;
private TimelineEvent <EventPlanning> currentEvent; //current event to be changed, edited, deleted or added

@PostConstruct
public void initialize() { long skipped code }

public void onAdd(TimelineAddEvent e) {
    currentEvent = TimelineEvent.<EventPlanning>builder()
            .id(e.getId())
            .data(new EventPlanning())
            .startDate(e.getStartDate().toLocalDate())
            .endDate(e.getStartDate().toLocalDate().plusDays(1))
            .editable(true)
            .group(e.getGroup())
            .build();
    model.add(currentEvent);
    }

public void saveNewEvent() {
    EventPlanning nouvelEvent = new EventPlanning(currentEvent.getData().getValeur(), groupMap.get(currentEvent.getGroup()), Date.valueOf(currentEvent.getStartDate().toLocalDate()));
    eventPlanningDAO.save(nouvelEvent);

    TimelineUpdater timelineUpdater = TimelineUpdater.getCurrentInstance(":form:timeline");
    model.update(currentEvent, timelineUpdater);
}

---

I skipped getters, setters, and other listeners

I think there's something I'm missing about JSF ... Any idea what it is ?

Thank you all !

Answer 1

Found it ! My class had to be @ApplicationScoped :)