Bonjour à tous,
Dans le cadre de mon application planing, je tombe sur un nouveau problème.
J'affiche un calendrier prenant en compte le nombre de jour du mois, sur chaque jours j'ai un petit icone qui est sensé me permettre d'éffectuer des action (un menu qui apparait au clic sur l'icone), menu généré via une requête ajax
Mais voilà, mon div s'affiche correctement la première fois, lorsque je clic hors de la zone du div il disparait (oui c'est bien ce que je voulait), mais le problème est que si je clic sur l'icone d'un autre jour le div ne s'affiche plus, en revanche la requête ajax elle est bien exécuté et retourne bien un menu, mais qui ne s'affiche pas
Voici mon jQuery
Je m'y prend peut-être mal ou j'ai peut-être une mauvaise approche de la chose, je débute en jQuery donc j'en serait pas trop étonné lol
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
33
34
35
36
37
38
39
40
41
42 $(".showMnPlan").click(function(e){ // Variable permettant de vérifier la position du pointer // Ceci évitera de fermer le menu si on clic sur un lien du menu var mouse_is_inside = false; // Récupère les différent paramètre à envoyer pour le menu var idCbl = $(this).attr('id'); // Structuration des paramètres à envoyer lors de la requête var tmp = idCbl.split("_"); var prm = "idCom="+tmp[0]+"&y="+tmp[1]+"&m="+tmp[2]+"&d="+tmp[3]+"&etat="+tmp[4]; // Dans le cas ou le div('#mnPlan') n'existe pas encore var div = document.createElement('div'); // Mise en forme (passera par une classe une fois fonctionnel ) div.setAttribute("style","position:absolute;margin-top:-15px;z-index:1000;border: solid 1px #000;height:50px;width:200px;background-color:#fff;"); // Définit l'id du DIV div.setAttribute("id","mnPlan"); // Si le div existe on l'affiche if($("#mnPlan").length){ $('#mnPlan').show(); } // Sinon on crée le div et on l'ajoute au DOM (sur le parent car le picto est une image ) else{ this.parentNode.appendChild(div); } // Requête ajax $.ajax({ type : 'POST', url : 'libs/ajax/menuReady.php', data : prm, success: function(msg){ // En cas de succès on insère le menu dans le DIV $('#mnPlan').html(msg); } }); // Détection du clic en dehors de la zone du div $(document).click(function(e){ // Si on est sur le div alors on définit le inside à true $('#mnPlan').hover(function(){ mouse_is_inside=true; }, // Sinon à false function(){ mouse_is_inside=false; }); // Si le pointer n'est pas sur le div et que l'on clic sur le coter // On masque le div $(document).click(function(e){ if(! mouse_is_inside) $('#mnPlan').hide(); }); }); });
Donc l'objectif, afficher un div contenant un menu au clic sur une image, fermeture de celui-ci si on clic en dehors, mais surtout celà doit être fesable sur tout les jours du mois
Si vous comprennez rien à ce que je raconte, n'hésitez pas à poser vos question, je tâcherai d'y répondre au mieux
D'avance merci de votre participation et de votre indulgence
Cordialement
Partager