CODEWITHSUNDEEP
jsfrichfaces
a. chardin
a. chardin

Reputation: 1

Why my calendar is not correctly rendered when I update the month?

I would like to change the month of a calendar via a drop down list.

Here is the a copy of the view :

enter image description here

Here is the html code :

<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:ui="http://java.sun.com/jsf/facelets" 
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<h:head>
</h:head>

<h:body>
    <h:form id="TEST">
        <rich:select id="MOIS"
             value="#{essai.mois}"
             valueChangeListener="#{essai.onMois}"
             onclick="document.getElementById('JOUR').showSelectedDate();"
             disabled="false" >
            <f:selectItem itemValue="0" itemLabel="Janvier" />
            <f:selectItem itemValue="1" itemLabel="Février" />
            <f:selectItem itemValue="2" itemLabel="Mars" />
            <f:selectItem itemValue="3" itemLabel="Avril" />
            <f:selectItem itemValue="4" itemLabel="Mai" />
            <f:selectItem itemValue="5" itemLabel="Juin" />
            <f:selectItem itemValue="6" itemLabel="Juillet" />
            <f:selectItem itemValue="7" itemLabel="Août" />
            <f:selectItem itemValue="8" itemLabel="Septembre" />
            <f:selectItem itemValue="9" itemLabel="Octobre" />
            <f:selectItem itemValue="10" itemLabel="Novembre" />
            <f:selectItem itemValue="11" itemLabel="Décembre" />
            <a4j:ajax event="selectitem" render="TEST" />
        </rich:select>
        <br/>
        <rich:calendar
            id="JOUR"
            popup="false"  
            showHeader="false"    
            showFooter="true"
            datePattern="ddMMyyyy"     
            value="#{essai.jour}"
            valuechangelistener="#{essai.onJour}"
            disabled="false">
            <a4j:ajax event="change" render="TEST"/>
        </rich:calendar>
    </h:form>
</h:body>
</html>

Here is the bean code :

import org.richfaces.demo.calendar.TDate;

@ManagedBean(name = "essai", eager = true)
@SessionScoped
public class EssaiBean implements Serializable {

private static final long serialVersionUID = 1L;

private static final Logger logger = Logger.getLogger(TDate.class.getName());

/** Numéro du jour de la date 1 à 31 ou -1 */
private int             jour;

/** Numéro du mois de la date 0 à 11 ou -1 */
private int             mois;

private Integer         isMonthChanged;


/*********************************************************************************************/
/**                                    getteurs / setteurs                                  **/
/*********************************************************************************************/

public Date getJour() {
    Date date = (new GregorianCalendar(2016, (mois == -1) ? 0 : mois, (jour == -1) ? 1 : jour)).getTime();
    logger.debug("getJour : " + date);
    return(date);
}

public void setJour(Date date) {
    logger.debug("setJour : " + date);
    GregorianCalendar gcDate = new GregorianCalendar();
    gcDate.setTime(date);
    this.jour  = gcDate.get(GregorianCalendar.DAY_OF_MONTH);
    this.mois  = gcDate.get(GregorianCalendar.MONTH);
    isMonthChanged = 0;     
}

public int getMois() {
    logger.debug("getMois : " + mois);
    return mois;
}

public void setMois(int mois) {
    logger.debug("setMois : " + mois);
    this.mois = mois;
    isMonthChanged = 1;     
}

public Integer getMajMois() {
    logger.debug("isMonthChanged : " + isMonthChanged);
    Boolean b = isMonthChanged == 1;
    ;
    return isMonthChanged;
}
/*********************************************************************************************/
/**                                 Gestion des événements                                  **/
/*********************************************************************************************/

public void onJour(ValueChangeEvent event) {
    logger.debug("onJour : " + event.getOldValue() + " => " + event.getNewValue() + " (" + event.getNewValue().getClass().getName() + ")");
}

public void onMois(ValueChangeEvent event) {
    logger.debug("onMois : " + event.getNewValue() + " (" + event.getNewValue().getClass().getName() + ")");
}

/*********************************************************************************************/
/**                                      Autres fonctions                                   **/
/*********************************************************************************************/

/**
 * Cette fonction initialise la date avec la date par défaut '1 JAN 2000'.
 * @param gedcom : date gedcom liée à cette date élémentaire.
 */
public EssaiBean() {
    logger.debug("EssaiBean");
    jour = 1;
    mois = 0;
    isMonthChanged = 0;     
}

}

My problem is that the month of the calendar is not always updated when I select un month with the dropdownlist. If I select the month immediately after form is displayed the calendar month is updated. If I select first a day in the calendar and after I select a month with the dropdownlist the calendar month is not updated :

enter image description here I don't understand why.

I am using Richfaces 4.5.18 and wildfly-10.0.0.Final

Upvotes: 0

Views: 226

Answers (1)

Makhiel
Makhiel

Reputation: 3884

(I don't know what RF version you're using but it's not 4.5.18)

Your problem is here:

onclick="document.getElementById('JOUR').showSelectedDate();"

First of all onclick happens when you click on the select (i.e. before you select a month), and then the form is rerendered anyway.

Secondly you cannot execute component methods on DOM elements, use either RichFaces.component('TEST:JOUR') or #{rich:component('JOUR')}. (Also there is no element with id="JOUR")

The showSelectedDate() method needs to happen after the form is rerendered, for that there is the oncomplete attribute:

<a4j:ajax event="selectitem" render="TEST" 
          oncomplete="#{rich:component('JOUR')}.showSelectedDate();" />

Upvotes: 1

Related Questions