onClick=fonction() ne fonctionne qu'au deuxième chargement
Bonjour à tous et merci d'avance de votre lecture,
Voilà je suis confronté à un problème vraiment incompréhensible pour moi en tout cas..., je vais essayer de vous l'expliquer à l'écrit du mieux que je peut :)
Dans mon code, je génère un calendrier dynamique en PHP, à l'intérieur pour gérer des "événements"*j'utilise du JS, certes c'est dégueu et ça veut dire que le code et mal construit, mais c'est trop tard pour recommencer certaine partie, le code venant pas de moi et la dite personne n'étant plus dans le service (L'utilisation du "JE" n'est pas vraiment approprié mais j'ai pas envie de m'embêter avec ça :p). Plus simplement la moulinette PHP trouve un événement dans la BDD, et ajoute un
Code:
class="event_case" onclick="evenement(13);"
dans la <td></td> approprié. ce qui permet de changer le CSS de la TD pour afficher visuellement l’événement (ici : un point noir, venant d'une image) , et lors d'un clique sur la case logiquement le onclick="evenement(13);" fait effet et renvoie à une fonction toute simple js qui permet l'affichage (display:block;) de la description de l’événement contenue dans la BDD. Mais ce n'est pas tout ! J'ai aussi des boutons permettant d'afficher le bon calendrier càd, le bon mois,
ex : le mois actuelle afficher par défaut, mais possibilité de cliquer sur le bouton SEPTEMBRE pour mes événements de SEPTEMBRE.
Avec quelques effets de style en CSS3/JS, lors du clique cela change le CSS pour faire apparaître le calendrier d'une belle façon (Hors de l'écrans et fait sont chemin vers là ou il doit être).
*Ces événements sont stocké dans une base de donnée, sont extrait en début de page et gérer ensuite par un algo qui gère les dates en timestamp.
Alors voilà ! tout fonctionne parfaitement... parfaitement ? non,... un groupe d’irréductible bugs résiste toujours au développeur.
Voici mon problème : Comme vous le savez maintenant le PHP créer un case avec
Code:
class="event_case" onclick="evenement(13);"
dans la TD, certes donc impossibilité d'avoir l'un ou l'autre... c'est les deux ou rien je précise, car la suite est plutôt ?drôle? au chargement de ma page (log effectué, moulinette, affichage du calendrier par défaut, css associé) le calendrier s'affiche correctement, avec l’événement dans la bonne case, et le bon CSS (point noir). MAISlorsque je clique sur la case qui est sensé être :
Code:
<td class="event_case" onclick="evenement(13);">9</td>
rien ne se passe, alors je vérifie (firebug, et developperTools de Chrome) mais la TD dans le code est :
Voilà... Je ne comprend pas du tout les navigateurs affiche le CSS associé, mais le JS ne fonctionne absolument pas, et de plus <le mystère> c'est qu'il affiche quand même le CSS alors qu'il n'y a qu'un simple <td></td>.
Petit précision, lorsque je change de calendrier, et je reviens sur le "bugué" tout re-fonctionne (JS + CSS), et dans le DevelopperTools il affiche bien le event_case et le onclick.
Le code CSS
Calendrier
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .calendar table{
box-shadow: 5px 5px 5px 7px grey;
border-collapse:collapse;
overflow: hidden;
border: 3px;
width:442px;
left: 20%;
position: fixed;
font-family: Helvetica, 'Lucida Grande', Arial, sans-serif;
font-size: 14px;
font-weight: bold;
color: #406da0;
margin: 15px;
float: left;
opacity: 0;
-webkit-transition: all .4s ease-in;
-moz-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
background-color: rgba(0, 108, 255, 0.26);
} |
Code:
1
2
3
4
5
6
7
8
9
10
| .calendar tr td{
border : 1px solid grey;
width : 60px;
height : 60px;
text-align:right;
vertical-align:bottom;
font-size:18px;
font-weight: normal;
} |
Événement + Description Événement
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .evenement{
font-size:15px;
display: none;
width: 25%;
float:right;
position:relative;
left: -15em;
}
.description{
font-style: italic;
list-style: none;
word-wrap: break-word;
width: 80%;
position:relative;
} |
PHP
La case événement, la div description
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| // Affichage d'un événement qui dure uniquement une journée
echo "<td class=\"event_case\" onclick=\"evenement(".$evenement.");\" >".$day."</td></tr><tr>";
// Affichage du détail des événements existants
echo "<div class=\"evenement\" id=$evenement>";
echo "<ul>";
echo "<li class=\"today\">".$days[$num_day-1]." ".date('j', $datetime)." ".$months[$month-1]."</li>";
$i--;
while ($i >= 0){
echo "<li style=\"font-weight: bold; font-size: 15px;\">".$nom_event[$i]."</li>";
echo "<li class=\"description\">".$description[$i]."</li>";
$i--;
} |
Le JS
Fonction d'affichage
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // Fonction qui permet d'afficher les événements d'un jour en cliquant sur sa case correspondante
function evenement(id_case) {
var visible;
var id_events = 13; // id du premier événement
//var invisible;
visible = document.getElementById(id_case);
invisible = document.getElementById(id_events);
while (invisible){ // Test si l'événement existe
invisible.style.display = "none";
if (id_events == id_case){ // Affichage de l'événement sur lequel on a cliqué uniquement
visible.style.display = "block";
}
id_events++;
invisible = document.getElementById(id_events);
}
} |
Je suis vraiment déboussolé, je ne comprends pas vraiment ce qu'il se passe ! :S
