Bonjour,

Mon problème est le suivant, sur une pe:timeline, je voudrai afficher une popup lorsque je passe sur un event.

onMouseOver n'étant pas compatible avec la timeline, j'ai trouvé sur le net une solution mettant en place un p:panel qui contient lui même un p:tooltip pour afficher ma popup lorsque je passe sur un event.

Le problème est le suivant, lorsque je mets l'include de la page xhtml que je veux afficher dans mon tooltip, une popup semble bien s'ouvrir mais rien à l'interieur (voir image 1) de la PJ.
Si je mets directement le code de ma page xhtml dans le tooltip, l'affichage se fais bien correctement. (voir image 2 de la PJ).
Mais ceci n'est pas une solution car suivant la couleur de la case, je dois afficher une popup différente

Je vous joins le code de ma timeline, la page xhtml que je veux afficher dans ma popup via l'include ainsi qu'une photo pour mieux comprendre le problème.

Merci d'avance pour votre aide.

timeline
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
<ui:composition template="../../WEB-INF/templates/standard.xhtml">
 
       <ui:define name="content">
 
             <script type="text/javascript">
                    PrimeFacesExt.locales.Timeline['fr'] = {
                        'MONTHS': ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
                        'MONTHS_SHORT': ["Jan", "Fev", "Mar", "Avr", "Mai", "Jun", "Jul", "Aou", "Sep", "Oct", "Nov", "Dec"],
                           'DAYS': ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"],
                           'DAYS_SHORT': ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
                        'ZOOM_IN': "Zoomer",
                        'ZOOM_OUT': "Dézoomer",
                        'MOVE_LEFT': "Déplacer à gauche",
                        'MOVE_RIGHT': "Déplacer à droite",
                        'NEW': "Nouveau",
                        'CREATE_NEW_EVENT': "Créer un nouvel évènement"
                    };
             </script>
 
 
             <h:form id="formTableauBord">
 
                    <p:fieldset legend="Programmation">
 
                         <pe:timeline id="timeline" value="#{tableauDeBordBean.model}"
                              editable="true" selectable="true" eventMargin="12" eventMarginAxis="0"
                              locale="fr" zoomMin="10000000" zoomMax="606000000"
                              start="#{tableauDeBordBean.start}"
                              end="#{tableauDeBordBean.end}"
                              showNavigation="true" showButtonNew="false" widgetVar="wvTimeline"
                              axisOnTop="true" stackEvents="false" themable="false" groupsOrder="false" var="objetSelectionnee" > 
 
                              <p:ajax event="select" update=":infosTerrain"  listener="#{tableauDeBordBean.onSelect}" />
 
<!--                          Essayer d'afficher la lettre D ou A dans les cases blanches -->
                              <h:panelGrid columns="1" class="modelClass4Id_#{objetSelectionnee.id}">
                                  <h:outputText value="D"/>                    
                              </h:panelGrid>
 
                          </pe:timeline>      
 
                     <p:panel id="panelTooltipTimeline" style="display:none">
                          <ui:repeat var="unePopup" value="#{tableauDeBordBean.model.events}">
                                 <p:tooltip id="tooltip" for="@(.modelClass4Id_#{unePopup.data.id})" >
 
 
                                                    <ui:include src="/web/programmation/popupInfosTerrain.xhtml" />
 
 
 
                                  </p:tooltip>      
 
                          </ui:repeat>
                     </p:panel>
 
 
                    </p:fieldset>
             </h:form>
 
 
             <ui:include src="/web/programmation/infosTerrain.xhtml" />
 
 
       </ui:define>
</ui:composition>
</html>

dialog que jhe veux afficher dans le tooltip
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<div xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:p="http://primefaces.org/ui"
       xmlns:pe="http://primefaces.org/ui/extensions">
 
 
       <p:dialog
             widgetVar="popupInfosTerrain"
             resizable="false"
             appendToBody="true"
             id="popupInfosTerrain"
             closable="false"
             width="450"
             showEffect="clip"
             hideEffect="fold"
             draggable="true"
             modal="true"
             header="Terrain ">
 
             <center>
 
                    <h:panelGrid columns="2">
                           <p:outputLabel value="Libellé :" />
                           <p:outputLabel value="#{tableauDeBordBean.terrainAAfficher._libelle}" />
 
                           <p:outputLabel value="Code :" />
                           <p:outputLabel value="#{tableauDeBordBean.terrainAAfficher._code}" />
                    </h:panelGrid>
 
             </center>
 
       </p:dialog>
 
</div>
image
Nom : copie ecran.png Affichages : 584 Taille : 162,4 Ko