[UI] [Datepicker] Evénement sur onSelect

[Datepicker] Evénement sur onSelect

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:

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:

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;
	}
}
?>

Il semblerait que quand je selectionne une date, en plus du comportement que j'avais noté, que les boutons soient complétements privés de leurs listeners.

$("#element").toggleClass('nom_classe') signifie : SI l'élement ayant l'id "element" contient la classe nommée (nom_classe) supprime là, SINON AJOUTE la, tu devrai faire la différence entre toggleClass et removeClass et addClass.
puis si tu veux ajouter la classe .nocheck aux boutons, tu peux faire tout simplement :
Code:

1 2 $("#buttonList button").addClass("nocheck");
ensuite ton arrayDate est sous forme : [{"0":"17","debut":"17"}] si on veux afficher 17h par exemple, donc il va falloir vérifier chaque item de ce tableau s'il contient d'abord la variable debut.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 for(i = 0; i < arrayDate.length; i++) { if(arrayDate[i].debut){ console.log('id :'+arrayDate[i].debut); $("#"+arrayDate[i].debut).addClass("check"); } } /*ou en jQuery*/ $.each(arrayDate,function(k,v){ if(v.debut){//si la variable debut existe console.log('debut :'+v.debut); $('#'+v.debut).addClass('check');//ajoute la class .check au bouton correspondant } });