div flottant qui n'apparait qu'une seule fois [Résolu]

[splifferwolf]

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

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
 
$(".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(); }); 
    }); 
});

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

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

[SpaceFrog]

pour la création du div ...

Code :

  div = $('div').css({position:'absolute','margin-top':'-15px';'z-index':1000;border: 'solid 1px #000';height:'50px';width:'200px';'background-color':'#fff'});

ça sert à ça jquery

puis regarde du coté de append() de jquery ...
puis de .click() pour attribuer le declenchement de l'apparition ...

et enfin de show() et hide() poru afficher / masquer ton div ...

[splifferwolf]

Merci SpaceFrog pour votre participation, j'ai regarder un peut les fonction que vous m'avez cité et conclusion .... j'ai quelques chose qui fonctionne xD

Après je sais pas si c'est la meilleur méthode
Voici donc ma solution

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
 
$(document).ready(function(){ // Quand le document est charger
 
    var mouse_is_inside = false; // Etat par défaut du curseur (n'est pas sur le div);
 
    // Au survol du div par le curseur on définit à true, sinon à false
    $('div.myMenu').hover(function(){ mouse_is_inside=true; }, function(){ mouse_is_inside=false; });
 
    /** Au clic sur le document on masque le div si le cursor n'est pas positionner sur ce dernier **/      
    $(document).click(function(e){ if(!mouse_is_inside) $('div.myMenu').hide(); }); 
 
    /** Construction de la fonction **/
    (function($){
        $.fn.myMenu = function() {
            $('body').append('<div class="myMenu"></div>'); // Ajout le div contenant le menu au DOM
            $('div.myMenu').hide(); // Masque le div par défaut
 
		    // Au clic sur l'objet
		    $(this).click(function(){
		        var idCbl = $(this).attr('id'); // Récupère mes identifiant pour ma requête
                var tmp = idCbl.split("_"); 
                // Structuration des paramètres à envoyer lors de la requête
                var prm = "idCom="+tmp[0]+"&y="+tmp[1]+"&m="+tmp[2]+"&d="+tmp[3]+"&etat="+tmp[4];
			    // Requête
                $.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 containeur
                        $('div.myMenu').html(msg);
                        $('div.myMenu').show();
                    } 
                });
 
                // Positionnement du div
	   var pos = $(this).offset();
	   var newPos = pos;
	   newPos.top = pos.top + 30;
	   newPos.left = pos.left;
 
                // Mise en forme CSS
                $('div.myMenu').css( { position:'absolute',
                                               'margin-top':'-15px',
                                               'z-index':1000,
                                               border: 'solid 1px #000',
                                               height:'50px',
                                               width:'200px',
                                               'background-color':'#fff' } );
 
                // Applique le positionnement
                $('div.myMenu').css(newPos);
 
            });
 
         }
     })(jQuery);
});

je l'inclus depuis un fichier js, ensuite dans le head

Code :

1
2
 
$('.showMnPlan').myMenu(); // Sur tout les élément dont la class est showMnPlan

Voili voilou, au clic sur l'élément il affiche le div, clique sur un autre il repositionne le div, clic ailleur que sur le div il disparait

Merci pour vos pistes
je marque le sujet comme étant résolut

[SpaceFrog]

je te conseillerais de remplacer hover par mouseover mouseout
afin de te permettre de gérer une pile d'evènements...

[splifferwolf]

oui effectivement xD, j'ai juste du le placer dans le success de l'ajax sinon il prenait pas le changement d'etat, mais ca me semble plus propre xD

Encore merci