Discussion :

[Zembla]

Bonjour,

j'essaye d'utiliser le script fullcalendar en lien avec une table mysql via json.
la table se présente comme ceci

id, nom , date-debut, date-fin

l'affichage se fait bien au niveau du calendrier. Quand je clique sur un nom dans une période donnée j'affiche bien dans une div le nom cliqué dans le calendrier.

Code :

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

1
2
3
4
eventClick: function (event) {
            $.getJSON('affichage_detail_planning.php', function (user) {
    $("#firstname").text(user[0].nom);    
  });

si j'ai plusieurs nom d'affichés dans une des cases du calendrier, c'est toujours celui qui correspond à la première ligne de la table qui s'affiche ( user[0]).. normal.
à la place de la clé [0], j'aimerais afficher dynamiquement la valeur de l'id de la ligne mysql correspondant au nom cliqué.

merci pour votre aide

[Zembla]

j'avance un peu.

en faisant un

Code :

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

console.log(event.id);

je récupère l'id qui m’intéresse, ce qui pourrait bien m’être utile pour la solution.

[Toufik83]

Salut,

Si je comprends bien, tu veux récupérer le bon user en passant par event.id, c'est ça ?

Pour ça il faut d'abord voir la structure de l'objet user .

Si tu fais un console.log(user); ça donne quoi ?

[Zembla]

merci de répondre Toufik
un

Code :

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

console.log(user)

me donne une erreur

Uncaught ReferenceError: user is not defined
at HTMLAnchorElement.eventClick ((index):29)
at t.publiclyTrigger (fullcalendar.min.js:10)
at e.publiclyTrigger (fullcalendar.min.js:9)
at e.handleClick (fullcalendar.min.js:8)
at HTMLAnchorElement.<anonymous> (fullcalendar.min.js:7)
at HTMLDivElement.dispatch (jquery.min.js:2)
at HTMLDivElement.y.handle (jquery.min.js:2)

par contre un

Code :

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

console.log(event.id-1);

m'affiche bien l'id qui convient, ce qui me permettra d'afficher les infos voulus dans une div.

[Toufik83]

Je ne comprends pas, console.log(user); te donne l'erreur Uncaught ReferenceError: user is not defined par-contre console.log(user.id-1); te renvoi le bon id ?!

Il faut mettre la ligne console.log dans la fonction callback de getJSON :

Code :

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

1
2
3
4
 
 $.getJSON('affichage_detail_planning.php', function (user) {
       console.log("user :",user);  //ici et pas ailleurs
 });

[Zembla]

merci toufik pour cette précision

ce que j'ai mis c'est

Code :

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

console.log(event.id-1)

et ça fonctionne

en mettant

Code :

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

 console.log("user :",user);

ça m'affiche l'array, ce qui est mieux.

ça me donne ce message

Code :

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

1
2
3
4
5
{0: {…}, 1: {…}, id: "2", nom: "Bower"}
0: {id: "1", nom: "Martin", start: "2019-11-26", end: "2019-11-27"}
1: {id: "2", nom: "Bower", start: "2019-11-26", end: "2019-11-29"}
id: "2"
nom: "Bower"

[Toufik83]

Emmm, ce n'est pas un array, mais plutôt un objet et d'après ce que je vois, les deux objets 0 et 1

Code json :

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

1
2
0: {id: "1", nom: "Martin", start: "2019-11-26", end: "2019-11-27"},
1: {id: "2", nom: "Bower", start: "2019-11-26", end: "2019-11-29"}

ne te servent à rien puisque tu récupères juste après le id et le nom de l'utilisateur id:2,nom:"Bower"
Donc tu peux accéder directement au nom de user et son id avec user.nom et user.id :

Code :

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

1
2
 
$("#firstname").text(user.nom); //pour le nom et pour l'id c'est user.id

[Zembla]

c'est ça
c'est pour ça que quant je fais

Code :

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

 $("#firstname").text(user[event.id-1].nom);

je récupère le bon nom chaque fois que je clique sur le nom, ce qui me convient

par contre quant je met ton code

Code :

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

$("#firstname").text(user.nom);

il ne récupère que le dernier nom de la liste

[Toufik83]

D'accord, content pour toi que ça fonctionne comme tu veux, mais j'ai des questions quand même, parce que je ne suis pas sûr de l'utilisation de event.id-1.

Je t'explique pourquoi, lorsque tu auras un user ayant un id (6 par exemple)

Code json :

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

1
2
3
 
0: {id: "1",nom:"nom 1",..},
1: {id: "6",nom:"nom 2",..}

différent des indexes (0,1...) et event.id=6, en suivant ton code on va récupérer user[6-1]=user[5] alors que l'index 5 n'existe pas dans ton objet user, et ton code renverra undefined.

Quel est le rapport entre event.id et user, c'est le id de l'utilisateur ou bien c'est l'id de l'événement qui a été enregistré par l'utilisateur ?

Que fait le fichier "affichage_detail_planning.php" ?, contient-il une requête sql qui récupère les champs de la table et les events ?, si oui montre moi le code de ce fichier.

[Zembla]

"affichage_detail_planning.php" est juste une simple requête select sur une table ça récupère les lignes de la table et l'envoie en json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$sqlQuery = "SELECT * FROM tbl ORDER BY id";
 
    $result = mysqli_query($conn, $sqlQuery);
    $eventArray = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $eventArray['id'] =  $row['id'];
    $eventArray['nom'] = $row['nom'];
        array_push($eventArray, $row);
    }
    mysqli_free_result($result);
 
    mysqli_close($conn);
    echo json_encode($eventArray);

effectivement je viens de tester en mettant un enregistrement dans la table avec un id=5 et ça me fait cette erreur

(index):27 Uncaught TypeError: Cannot read property 'nom' of undefined
at Object.success ((index):27)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)

pas encore résolu mon probleme
encore merci

[Toufik83]

Apparemment tu ne veux plus lire ce que j'ai écris , c'est comme tu veux, mais je suis sûr que tu reviendras au forum quand tu auras vu l'erreur dont je t'ai parlé.

[Zembla]

si si j'ai lu mais eu le temps de répondre assez tôt

bon si je fais gaffe de bien incrémenter ma table mysql en ne laissant pas de trou ça fonctionne.

ça n'est pas satisfaisant mais bon..ça marche..

[Toufik83]

bon si je fais gaffe de bien incrémenter ma table mysql en ne laissant pas de trou ça fonctionne.
ça n'est pas satisfaisant mais bon..ça marche..

.

Ce n'est pas parce que ça fonctionne que c'est la bonne solution.

Il faut parcourir l'objet user pour récupérer le bon utilisateur selon le event.id, donc :

Code :

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

1
2
3
4
5
6
7
 
$.getJSON('affichage_detail_planning.php', function (user) {
    var us=$.map(user,function(v){//on parcours l'objet user 
            return v.id==event.id?v:null;//retourne seulement le user ayant le id=event.id
    });
    $("#firstname").text(us[0].nom);//affiche le nom de l'objet user qui a été ajouté dans le tableau us.    
});

Une autre solution avec $.grep au lieu de $.map :

Code :

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

1
2
3
4
5
6
7
8
 
$.getJSON('affichage_detail_planning.php', function (user) {
    var convertToTableau=Array.from(Object.values(user));//on convertit l'objet user en array
    var us=$.grep(convertToTableau,function(v){
            return v.id==event.id;
    });
    $("#firstname").text(us[0].nom);//affiche le nom de l'objet user qui a été ajouté dans le tableau us.    
});

[Zembla]

avec ton dernier code j'ai cette erreur

(index):27 Uncaught ReferenceError: data is not defined
at Object.success ((index):27)
at u (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at k (jquery.min.js:2)
at XMLHttpRequest.<anonymous> (jquery.min.js:2)

[Toufik83]

Oupss, désolé c'est une erreur de copier/coller.

Remplaces data par user.

[Zembla]

oui en mettant "user" ça fonctionne nickel
bravo Toufik et encore merci

[Toufik83]

Pas de souci, maintenant tu peux cliquer sur le bouton tranquillement