Bonjour,

Je rencontre actuellement un problème avec une interface permettant de donner ses disponibilités.
Le XMLHttpRequest retourne bien les bonnes données. Seulement les événements du datepicker ne font pas ce que je souhaite :
  • D'une part, litteralement une fois sur deux les boutons ne se colore pas (ils ont le background-color de base) lors d'un changement de date, alors que si je fais un console.log ou un alert les données sont bien actualisées.
  • Deuxième problème, parfois les boutons scintillent, il passe à la couleur "check" avant de passer à "nocheck" sans raison que je trouve apparente
  • Troisièmement, lorsque je clique sur un des boutons il se colore (jusque là normal), mais lorsque je change la date, d'une part comme le premier point il s'efface, puis quand je reselectionne l'autre date à nouveau il s'affiche encore alors qu'il n'était pas dans les données de cette date. Autrement dit il s'affiche à nouveau (alors que j'ai bien specifié au debut de la fonction onselect d'initialisé les boutons à "nocheck".


Quelqu'un sait d'où vient ces problèmes ?

agenda.php
Code html : 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<?php
session_start();
 
if (isset($_SESSION['nom']) && isset($_SESSION['id'])) {
 
        include_once("head.php");
        require_once ("nav.php");
        include("../config/database.php");
 
        $database = new Database();
        $db = $database->getConnection();
?>
	<link href="jquery-ui.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
  	<div style="margin: 0 auto;width: 300px;text-align: left;">
  		<!-- Le calendrier -->
  		<div style="margin: 0 auto;width: 300px;margin-bottom: .4em" id="datepicker"></div>
 
  		<!-- La liste de bouttons -->
  		<div id="buttonList" style="overflow-y: scroll;height:200px;margin: 0 auto;width: 300px;">
  		<?php
                for($i=5;$i<21;$i+=3){
                        echo'<button type="button" class="btn btn-light" id="'.$i.'"
                             style="outline: none !important;box-shadow: none !important;padding-left:0;padding-right:0;width:90px;">'.$i.':00 - '.($i+1).':00</button>
 
                             <button type="button" class="btn btn-light" id="'.($i+1).'" 
                             style="outline: none !important;box-shadow: none !important;padding-left:0;padding-right:0;width:90px;">'.($i+1).':00 - '.($i+2).':00</button>
 
                             <button type="button" class="btn btn-light" id="'.($i+2).'" 
                             style="outline: none !important;box-shadow: none !important;padding-left:0;padding-right:0;width:90px;">'.($i+2).':00 - '.($i+3).':00</button>';
                }
                ?>
  		</div>
  	</div>
 
  	<style>
        .check
        {background-color:#BFC0C0;}
 
        .nocheck
        {background-color:#F8F9FA;}
        </style>
 
  	<script>
 
        function getXMLHttpRequest() {
                var xhr = null;
                if (window.XMLHttpRequest || window.ActiveXObject) {
 
                        if (window.ActiveXObject) {
                                try {
                                        xhr = new ActiveXObject("Msxml2.XMLHTTP");
                                }
                                catch(e) {
                                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                                }
                } else {
                        xhr = new XMLHttpRequest();
                }
                } else {
                        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return null;
        }
 
        return xhr;
    }
 
$(document).ready(function(){
 
        $('#buttonList > button').on("click", 
                function(){ 
                        if($(this).css("background-color") == "#BFC0C0"){
                        $(this).toggleClass("nocheck");
                        }
                else {
                        $(this).toggleClass("check");
                }
                }
        );
 
        $("#datepicker").datepicker({
                firstDay: 1,
        minDate: <?php echo '\''.(new \DateTime())->format('Y-m-d').'\'';?>,
        closeText: 'Fermer',
        prevText: '<',
        nextText: '>',
        currentText: 'Aujourd\'hui',
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
        dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
        dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
        dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
        weekHeader: 'Sem.',
        dateFormat: 'yy-mm-dd',
        showOn: "both",
                onSelect: function()
                {
                        var id_h ="<?php echo $_SESSION['id']?>";
 
                        var i;
                        for(i = 5; i < 23; i++) {
                        $("#"+i.toString()).toggleClass("nocheck");
                }
 
                        var xhr = getXMLHttpRequest();
                        xhr.onreadystatechange = function() {
 
                        if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
 
                                arrayDate = JSON.parse(xhr.responseText);
                                
                                var i;
                                for(i = 0; i < arrayDate.length; i++) {
                                        $("#"+arrayDate[i].debut).toggleClass("check");
                                }
                        }
                        };
 
                        xhr.open("GET", "actionAgenda.php?mode=get&id_h="+id_h+"&date="+this.value, true);
                        xhr.send(null);
                }
        });
});
        </script>
 
<?php
        $db = null;
}

actionAgenda.php
Code php : 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
<?php
if(isset($_GET["mode"]) && isset($_GET["id_h"]) && isset($_GET["date"]) ){
 
	include("../config/database.php");
 
	$database = new Database();
	$db = $database->getConnection();
 
	$mode = $_GET["mode"];
	$id_h = $_GET["id_h"];
	$date = $_GET["date"];
 
	if( $mode === "get" ){
 
		$stmt = $db->prepare("DELETE FROM CAL_HELPER WHERE `end`< NOW() - INTERVAL 1 DAY;");
		$stmt->execute();
 
		$date = "%".$date."%";
		/* CAST(substring(start,12,2) as UNSIGNED) = Un entier correspondant aux heures de disponibilité, si un helper est disponible le 2018-07-12 17:00, on récupère 17 (pour 17h)*/
		$stmt = $db->prepare("SELECT CAST(substring(start,12,2) as UNSIGNED) as debut FROM CAL_HELPER WHERE id_h=:id and disponible=1 and start LIKE :start;");
		$stmt->bindParam(":id",$id_h);
		$stmt->bindParam(":start",$date);
		$stmt->execute();
		$events = $stmt->fetchAll();
 
		echo(json_encode($events));
 
	} elseif ( $mode === "insert") {
 
		return null;
 
	} elseif ( $mode === "delete") {
 
		return null;
 
	} else {
 
		return null;
	}
}
?>