Discussion :

[fab56]

Bonjour,

Je réalise actuellement une application de planning en PHP/mySQL et je me sert de jQuery pour rendre les pages plus dynamiques mais je débute.

Voila mon problème : ma page principale (index.php) récupère, via l'objet ajax de jQuery, le contenu d'une autre page pour l'afficher dans un <div> : en fait il s'agit du tableau du planning (ajax.afficher.php)

Je voulais faire en sorte que sur chaque case quand on passe la souris une infobulle s'affiche. J'ai donc récupérer un script dans la section des tutoriels jQuery du site (ici)

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
$(document).ready(function() {
 
    // Sélectionner tous les liens ayant l'attribut rel valant tooltip
    $('a[rel=tooltip]').mouseover(function(e) {
 
        // Récupérer la valeur de l'attribut title et l'assigner à une variable
        var tip = $(this).attr('title');   
 
        // Supprimer la valeur de l'attribut title pour éviter l'infobulle native
        $(this).attr('title','');
 
        // Insérer notre infobulle avec son texte dans la page
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');    
 
        // Ajuster les coordonnées de l'infobulle
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
 
        // Faire apparaitre l'infobulle avec un effet fadeIn
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10',0.8);
 
    }).mousemove(function(e) {
 
        // Ajuster la position de l'infobulle au déplacement de la souris
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
 
    }).mouseout(function() {
 
        // Réaffecter la valeur de l'attribut title
        $(this).attr('title',$('.tipBody').html());
 
        // Supprimer notre infobulle
        $(this).children('div#tooltip').remove();
 
    });
 
});

seulement il ne semble pas fonctionner pour le tableau qui est chargé dynamiquement par mon script.
A l'extérieur de mon <div>, en écrivant ceci :

Code html :

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

<a rel='tooltip' title='texte infobulle'></a>

j'ai bien l'infobulle qui s'affiche comme prévu.

Mais quand je mets un tel lien dans la page ajax.afficher.php, cela ne fonctionne pas.

Je pense savoir pourquoi : le script est exécuté à la fin du chargement du DOM ($(document.ready( ... ) ) or l'affichage dans le <div> du tableau à lieu après (plusieurs mise à jour lors de l'utilisation).

Le problème c'est que ne sais pas trop comment faire pour que ce script s'applique aussi au tableau.

Est-ce que je dois mettre le code du script dans ajax.afficher.php ?

Merci d'avance.

[Bovino]

Il faut regarder du côté de .on() et particulièrement de la délégation d'événement.

[fab56]

Ok, j'ai regardé un peu vite fait. Effectivement ça a l'air d'être ça. Faut que je regarde ça un peu plus profondément. J'ai vu qu'il y avait .live(), comme un équivalent de .bind() mais qui se fait sur le DOM en temps réel.

Je te remercie. Je te tiens au courant pour savoir si j'ai réussi.

[fab56]

Apparemment .live est déprécié.

Il faut effectivement utilisé .delegate ou .on.

En modifiant un peu le code initial, cela donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$("body").delegate("a[rel=mission]", "mouseover", function(e){
 
        //... code pour l'évènement "mouseover"
 
    }).delegate("a[rel=mission]", "mousemove", function(e){
 
        //... code pour l'évènement "mousemove"
 
    }).delegate("a[rel=mission]", "mouseout", function(e){
 
        //... code pour l'évènement "mouseout"
 
    });

et cela fonctionne.

Merci pour l'aide. Je n'aurais pas eu l'idée de chercher du côté de .delegate().

A bientôt.