Discussion :

[Invité]

Bonjour,

Je viens vers vous car j'ai un soucis avec jQuery, je souhaite dans mes deux datepicker mettre des cellules d'un autre couleur depuis des dates stocké dans ma base de données, j'ai donc fais ma requête SQL que j'ai ensuite j'ai fais ça,

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent)){
        $tblDateEvent[]= array($qarray[0]);
}

Dans ma requête SQL j'ai formaté m'as date comme ceci,
DATE_FORMAT( colonne_date, '%Y,%m,%d' ).

Puis après j'ai mon code jQuery,

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
$(document).ready(function() {
        var tableau = '<?php json_encode($tblDateEvent) ?>';
        $("#datepicker2").datepicker({
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date){
                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();
                if($.inArray((m +1)+'-'+d+'-'+y, tableau) !== -1) {			
                    return [true, 'datepickerConsoDonDay'];
                }
                else{
                    return [true];
                }
            }
        });
        $("#datepicker1").datepicker({
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            onSelect: function(){
                if ($(this).val() !== '') {
                    $("#datepicker2").datepicker('option', 'minDate', $(this).val());
                }
            },
            onClose: function () {
                if ($(this).val() == '') {
                    $("#datepicker2").datepicker('option', 'minDate', null);
                }
            }
        });
});

Mon soucis c'est que beforeShowDate ne fonctionne pas, je pense que le tableau n'est pas bien formaté mais je ne sais pas comment faire. Tout les tutos que j'ai vu avais des tableaux déclarés en JS, donc je pense que c'est le tableau qui bloque...
Si vous pouviez m'aider à démêler tout ça, ça serais super.
Merci

Cordialement

[-Rpass-]

Bonjour,

comme tu dois le savoir json_encode te renvois la valeur d'une variable en JSON. Si la variable que tu souhaites encoder est un tableau indexé avec des indexpar défauts (0, 1, 2 etc..) alors ça te renvoi un tableau. Si ce sont des index autres (1, 2, 3 ... ou 'a', 'b', 'c') alors ça te renvoit un objet.Cf les exemple json_encode de cette page

Ensuite pour vérifier ce que contient ton objet tableau en jquery, affiche le dans la console (console.log()) et tu seras fixé

[Invité]

Tout à bord désolé de répondre si tard mais le weekend a été nécessaire pour me remettre sur ce travail avec l'esprit vidé.

Merci de ta réponse Rpass.

J'ai fais le console.log(), la console me dis qu'il ne renvois rien je ne comprend pas pourquoi.

La tableau en PHP contient ceci,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
2015,02,14|2015,02,18|2015,02,19|2015,02,20|2015,02,27 <!---(sans les pipe (|), et les virgules viennent du formatage dans la requête SQL)--->

Ce que je comprend pas pourquoi le json_encode me crée un tableau vide, est-il mal formaté? Je ne comprends pas, merci de votre aide.

Cordialement

[Darkaurora]

Un petit truc qui me choque

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tableau = '<?php json_encode($tblDateEvent) ?>';

il manquerait pas un "echo" par hasard ?

[Invité]

Quelle cruche je fais, merci darkaurora.
Mais maintenant il me dis que le tableau est null... Le formatage des données est-il en cause?

[Darkaurora]

Déjà une bonne pratique lorsque tu passes des variables au JS c'est de toujours tester leurs existences:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var tableau = '<?php echo json_encode(!empty($tblDateEvent) ? $tblDateEvent : array()); ?>';

Bien maintenant il faut savoir que json_encode n'est pas infaillible si des données (clé ou valeur) ne sont pas encodés en UTF-8 par exemple il te retournera une erreur.

Pour être sur que la fonction json_encode n'a pas produit d'erreur utilise json_last_error dont la documentation et des exemples d'utilisation sont fournis sur la documentation officiel PHP ici : http://php.net/manual/fr/function.json-last-error.php

Maintenant il serait déjà judicieux d'afficher ce que contient ton tableau avant de le passer au JS, tu peux le faire de cette manière:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent)){
        $tblDateEvent[]= array($qarray[0]);
}
var_dump($tblDateEvent);

[Invité]

Maintenant il serait déjà judicieux d'afficher ce que contient ton tableau avant de le passer au JS, tu peux le faire de cette manière:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent)){
        $tblDateEvent[]= array($qarray[0]);
}
var_dump($tblDateEvent);

J'ai déjà vérifié si mon tableau contenait bien ce que je voulais, j'ai marqué le résultat dans mon poste 2 (sans les pipes)

Merci de ton aide je vais testé ce que tu m'as donné et je reviens vers toi

[Invité]

Voici le résultat du var_dump de mon tableau $tblDateEvent

array(6) { [0]=> string(10) "2015,02,14" [1]=> string(10) "2015,02,18" [2]=> string(10) "2015,02,19" [3]=> string(10) "2015,02,20" [4]=> string(10) "2015,02,27" [5]=> string(10) "2015,03,05" }

Et pour le json_last_error il ne me renvoi "Aucune Erreur"
La syntaxe en JS du test est-elle exacte?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var tableau = '<?php echo json_encode(!empty($tblDateEvent)? tblDateEvent:array());
        echo json_last_error();?>';

[Darkaurora]

Nope!! Ne mets pas un echo json_last_error(); dans la partie JS ce n'est pas pratique et n'a donc aucun intérêt, de plus a ce niveau la tu ne peux que bousiller ce que tu souhaites récupérer avec json_encode.

Ma syntaxe est correcte si tu as du mal à la comprendre l'équivalent de: var tableau = '<?php echo json_encode(!empty($tblDateEvent)? tblDateEvent:array()); ?> est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var tableau = <?php if (!empty($tblDateEvent)) {
  echo json_encode($tblDateEvent);
} else {
  echo json_encode(array());
}

Peut tu essayer de faire un json_encode dans la partie PHP juste en dessous du var_dump ?

[Invité]

J'espère ne pas t'avoir froissé en demandant si le test était bon, je voulais dire si j'avais bien écrit le test.

Pour ce qui est du echo json_encode(!empty($tblDateEvent)? $tblDateEvent:array()); après le var_dump voici le résultat:

["2015,02,14","2015,02,18","2015,02,19","2015,02,20","2015,02,27","2015,03,05"]

Le formatage est bon?

[Darkaurora]

Non t'inquiète pas tu m'as pas froissé et pour ce qui est du formatage pour ma part je ne vois rien qui empêcherai que tu puisses passer tes données au JS

le console.log(tableau) est toujours égale à null ?

si oui l'erreur viens d'une autre partie de tes sources.

[Invité]

Le console.log() me renvoi [] ... Il a bien un tableau mais vide si j'ai bien compris?

[Darkaurora]

juste afin d'être certain si tu fais ça: var tableau = json_encode($tblDateEvent);D'ailleurs je viens de me rendre compte que j'ai oublié un "$" devant tblDateEvent dans la condition précédente vérifie si tu ne l'a pas recopié.

Bref si le console.log(tableau) te renvois [] c'est que tu réinitialises ta variable $tblDateEvent entre sa création et son encodage. Si console.log te renvois null c'est peut être que je suis mauvais

[Invité]

juste afin d'être certain si tu fais ça: var tableau = json_encode($tblDateEvent);

J'ai essayé tel qu'elle mais ça ne fonctionne pas...
Es-ce qu'il y a une importance sur l'emplacement du script JS par rapport au PHP? Car mon code est construit tel quel:

------
Code JS

Code javascript :

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
$(document).ready(function() 
    {
        var tableau= <? json_encode(!empty($tblDateEvent)? $tblDateEvent:array());?>
        console.log(tableau);
        $("#datepicker2").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date)
            {
                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();
 
                if($.inArray((m +1)+'-'+d+'-'+y, tableau) !== -1) 
                {			
                    return [true, 'datepickerConsoDonDay'];
                }
                else
                {
                    return [true];
                }
            }
        });
 
        $("#datepicker1").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            onSelect: function()
            {
                if ($(this).val() !== '') 
                {
                    $("#datepicker2").datepicker('option', 'minDate', $(this).val());
                }
            },
            onClose: function () 
            {
                if ($(this).val() == '') 
                {
                    $("#datepicker2").datepicker('option', 'minDate', null);
                }
            }
        });
    });

PHP - requêtes sur les données

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent))
{
        $tblDateEvent[]= $qarray[0];
}
var_dump($tblDateEvent);

PHP-HTML mise en forme des données.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<form class="frmPrintConsoDon" name="frmPrintConsoDon" method="POST" action="cafe.php">
                Du : <input type="text" name="dateDebut" id="datepicker1" readonly/> au <input type="text" name="dateFin" id="datepicker2" readonly/>&emsp;<input type="submit" name="valider" value="Valider"/>
</form>

------
Je crois que c'est mal placé pour le json_encode vu qu'il est dans les Code JS, ou faut-il le mettre pour qu'il m'encode correctement le tableau?

[Darkaurora]

Bon je pense que je ne suis pas doué non plus

Structure normal de ta page:

PHP -> HTML et affichage PHP -> JS

Avant le block JS faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
// Le code PHP et HTML est au dessus
var_dump($tblDateEvent, json_encode($tblDateEvent));
<script type="text/javascript">
$(document).ready(function() {
  var tableau = <?php ECHO json_encode($tblDateEvent); ?>;
  console.log(tableau);
  // le reste de ton code JS
});

[Invité]

Ce que j'ai fais c'est que j'ai mis le script avant le HTML et après le traitement des données donc ça fonctionne mon tableau est bien rempli, maintenant le soucis c'est que je n'arrive pas a changer la couleur des case qui correspondent au tableau, je ne vois pas pourquoi et la console ne me dit rien.

Je continue donc à chercher de mon coté mais si vous avez une piste je serais intéressé

Merci

[Invité]

Bon j'ai continué mes recherches mais je n'ai rien trouvé de concluant, rien ne fonctionne et je ne sait pas pourquoi...
Voici mon tableau tel qu'il est en JS:

[["2015,02,14"],["2015,02,18"],["2015,02,19"],["2015,02,20"],["2015,02,27"],["2015,03,05"]]

Et voici le code du script que j'ai changé le problème c'est que ça ne fonctionne pas....

Code JavaScript :

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
$(document).ready(function() 
{
        var tableau = '<?php print json_encode(!empty($tblDateEvent)? $tblDateEvent:array());?>';
        console.log(tableau);
        $("#datepicker2").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date)
            {
                for (var j = 0; j < tableau.length; j++) 
                {
                    if (date.getMonth() === tableau[j][1] - 1 && date.getDate() === tableau[j][0] && date.getYear() === tableau[j][2])
                    {
                        return [true, 'datepickerConsoDonDay'];
                    }
                    else
                    {
                        return [true];
                    }
                }
            }
        });
}

Je commence à désespérer de ne pas voir les erreurs du code...

Merci de votre aide

[Darkaurora]

Le problème c'est que tableau[j][1] est égal à 0 au quel tu soustrait -1 je ne sais pas ce que ça donne

Pour chaque élément dans ton tableau tu devrais utiliser split:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
for (var j = 0; j < tableau.length; j++) {
  var arrDate = tableau[j].split(',');
  if (date.getMonth() === arrDate[1] - 1 && date.getDate() === arrDate[2] && date.getYear() === arrDate[0]) {
    return [true, 'datepickerConsoDonDay'];
  }
 
  else {
   return [true];
  }

Je n'en suis pas sur à 1°°% tu devrais mettre des consoles log pour t'assurer de la validité des test et savoir ce que tu récupère respectivement dans date.getMonth() et arrDate[1]