Recupération d'id à la volée

Version imprimable

Bonsoir,

Dans une page php, je génère des balises <a> qui ont un id qui s'incrémente automatiquement, selon le résultat du nombre de ligne de la base de données.

id1
id2
etc...

J'aimerais appliquer l'évènement onclick en JavaScript, sur chaque nouveau lien créé. J'ai fais comme ceci, dans l’événement window.onload de la page, mais ça ne marche pas :
Code:

1 2 3 4 5 6 7 8 9 var k = 0; while (document.getElementById("group" + k)) { if (document.getElementById("group" + k)) { document.getElementById("group" + k).onclick = function() { alert(this.id); } } k++; }
Pouvez vous m'aider ?

John.

03/06/2012, 23h01
NoSmoking
Bonsoir,
tu as d'un coté des id1, id2... et de l'autre tu cherches des group1... ????

une question
Code:

1 2 while(document.getElementById("group" + k)) { if (document.getElementById("group" + k)) {// pourquoi ce TEST ?
03/06/2012, 23h13
Johngtrs

Non non des deux cotés j'ai group0, group1 etc... pardon ^^.

Ce test ? C'était pour tester si ils existent bien. Mais je pense qu'il est useless.

Citation:

...ça ne marche pas :

ceci est trop vague.

Suggestion quand même

Code:

1
2
3
4
5
6
7
8
var k = 0;
while (document.getElementById("group" + k)) {
    document.getElementById("group" + k).onclick = function() {
        alert(this.id);
        return false; // annule action par défaut
    }
    k++;
}

03/06/2012, 23h25
Johngtrs
Quand je dis ça ne marche pas, ça veut dire que ça ne passe pas par l'évènement, j'ai aucun retour. De même avec le return false.

J'ai même fais un test en dur et ça ne passe toujours pas par l'évènement :
Code:

1 2 3 document.getElementById("group0").onclick = function() { alert(this.id); }

pourtant ceci fonctionne parfaitement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
</head>
<body>
<a id="lien0" href="page1.html">page1</a>
<a id="lien1" href="page2.html">page2</a>
<a id="lien2" href="page3.html">page3</a>
<script type="text/javascript">
var i = 0;
while( document.getElementById( 'lien' +i)){
  document.getElementById( 'lien' +i).onclick = function(){
    alert( this.id);
    return false;
  }
  i++;
}
</script>
</body>
</html>

l'erreur semble être ailleurs!

03/06/2012, 23h42
Johngtrs

Mes liens ne sont pas créés directement lorsque la page est chargée.

Dans un premier temps j'ai un index alphabétique, lorsque je clique sur une lettre, c'est à ce moment là que mes liens sont créés.

Peut être que le problème vient de là ?
03/06/2012, 23h46
NoSmoking

Citation:

c'est à ce moment là que mes liens sont créés.

il est effectif que pour pouvoir affecter un événement à un élément il faut que l'élément existe.

C'est au moment de leur création qu'il te faut affecter l'événement.
03/06/2012, 23h50
Johngtrs
Comment je peux affecter l'évènement lorsque je les créés ? C'est une page php qui gère ça (le serveur plus précisément), à ce moment là :
Code:

1 2 3 4 5 while ( $k < $nb_resultats ) { $nom = pg_result ( $requete, $k, "nom" ); echo "<a href='#' id='group$k'>" . ucwords ( $nom ) . "</a><br/>"; $k ++; }

Sinon, tu peux utiliser la délégation d'événements :

Code:

1
2
3
<div id="aContainer">
<!-- C'est ici que tu insèreras tes liens -->
</div>

Puis ton JavaScript :

Code:

1
2
3
4
5
6
document.getElementById('aContainer').onclick = function(event){
    var target = event.target ? event.target : event.srcElement;
    if(target && target.tagName.toLowerCase () == 'a'){
        alert(target.id);
    }
}

04/06/2012, 08h49
andry.aime

Et le script de Spaffy?
04/06/2012, 08h58
SpaceFrog

Et sinon regarder tout simplement le code html généré ?
04/06/2012, 13h43
Johngtrs

Merci pour vos réponse.

Dans l'après midi je testerais la réponse de Bovino.

Sinon je trouve que le script est assez compliqué, je le regarderais plus attentivement si je n'y arrive toujours pas.

SpaceFrog, j'ai déjà regardé, les id des liens sont bien incrémentés.
04/06/2012, 17h55
Johngtrs
Avec la réponse de Bovino ça marche, après vu que j'ai d'autres liens qui apparaisse dans la même div, lorsque j'utilise le moteur de recherche du site, donc ça passe aussi dans l'évènement. Mais bon je vais essayer d'arranger ça.

Sinon, je pourrais avoir une explication sur les lignes suivantes ?
Code:

1 2 3 4 var target = event.target ? event.target : event.srcElement; if(target && target.tagName.toLowerCase () == 'a'){ alert(target.id); }
04/06/2012, 20h02
Bovino

La délégation d'événements consiste à poser un écouteur sur un unique élément parent. L'avantage est d'une part d'éviter de multiplier les gestionnaires si plusieurs éléments doivent avoir le même comportement et d'autre part de permettre de prévoir une gestion d'événements avant que les éléments en rapport ne soient insérés dans le DOM.

C'est cela que fait la portion de code que tu montres. On utilise l'objet event de l'événement pour récupérer l'élément qui a reçu l'événement (event.target) afin de déterminer s'il correspond au type d'élément souhaité (ici tagName == 'a', mais tu aurais pu tester un nom de classe par exemple : event.target.className), si c'est le cas, on lance le traitement souhaité.

Attention, IE ne gère pas les événements comme les autres navigateurs, en particulier, le W3C préconise l'envoi de l'objet event en paramètre automatique de la fonction de rappel alors qu'IE, dans ses anciennes versions, attache l'objet event au contexte global window, pour pallier cela, j'utilise le nom event pour que le reste du code soit compatible.
04/06/2012, 20h16
Johngtrs

Merci beaucoup pour ces précieuses réponses ^^. C'est très intéressant.

A bientôt ^^.
04/06/2012, 21h51
NoSmoking

Bovino, trop modeste pour citer :fleche: Comment attacher un événement à un élément qui n'est pas encore présent dans la page ? :mouarf:
04/06/2012, 22h40
Johngtrs

Au fait, que veut dire le point d’interrogation ?

Code:

event.target ? event.target : event.srcElement;
04/06/2012, 22h52
NoSmoking
il s'agit d'un opérateur ternaire ou opérateur conditionnel
```
condition ? valeur_VRAI : valeur_FAUX
```
Opérateurs spéciaux
05/06/2012, 00h01
Johngtrs

Hum d'accord, donc dans ce cas, ça voudrait dire :

si j'ai un event.target je retourne vrai sinon je retourne faux il n'y a pas d'event ?
05/06/2012, 00h58
Willpower
Citation:

Envoyé par Johngtrs

Hum d'accord, donc dans ce cas, ça voudrait dire :

si j'ai un event.target je retourne vrai sinon je retourne faux il n'y a pas d'event ?

Non, c'est juste une forme raccourcie pour :
Code:

1 2 3 4 5 6 if(COND){ CODE1 } else{ CODE2 }
Code:

COND?CODE1:CODE2;

Mais dans le cas de l'exemple présent, je préfère encore la forme :

Code:

var target = event.target || event.srcElement;

Le "||"(ou non-exclusif) testant d'abord le membre de gauche, s'il est "vrai" le renvoit sinon renvoit le membre de droite.

Cette forme, bien que pouvant être dangereuse pour tester des objets qui pourraient valoir "faux" comme par exemple 0 ou "", je la préfère car je la trouve plus "lisible au premier regard".

edit: event.srcElement c'est l'équivalent pour IE de event.target pour tous les autres navigateurs. ;)
05/06/2012, 01h09
Johngtrs

Oui je trouve ça plus lisible. Mais en fait je cherchais ce que voulait dire le "event.srcElement"

A tout hasard, dans ma fonction onclick, est-ce que je peux récupérer le dernier ID sur lequel j'étais ?
05/06/2012, 01h28
Willpower

Au cas où tu étais déjà en train d'écrire ce message et que tu n'as pas vu l'edit de mon dernier message, l'explication du srcElement s'y trouve. ;-)

Quant à ta seconde question, oui (enfin si j'ai bien compris ta question) il suffit de faire :

Code:

var id_de_l_element_clique = target.getAttribute('id');

(avec la variable target initialisée comme dans le code de bovino avec event.target ou event.srcElement )
05/06/2012, 01h51
Johngtrs

Non ça ne marche pas.

En fait j'ai un index alphabétique et si je clic sur une lettre, le background de la lettre obtient une image pour signaler que l'on se trouve bien sur la lettre cliqué.

Et lorsque je clic sur une autre lettre, vu que je fais tout avec ajax, je recharge pas les pages, je voudrais récupérer le dernier id sur lequel on a cliqué, pour lui enlever le background et mettre un background au nouveau.

ah si tu parles du précédent, (dernier, j'avais compris l'actuel) il n'y a pas de fonction javascript pour ça, tu dois le sauver toi-même lors du clique.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var last_id;
document.getElementById('conteneur').onclick = function(event){
  var target = event.target || event.srcElement;
  if(last_id){
    // enleve le background du précédent
    document.getElementById(last_id).style.backgroundImage = '...';
  }
  // sauvegarde nouvel id
  last_id = target.getAttribute('id');
  // ajout du background au nouveau
  document.getElementById(last_id).style.backgroundImage = '...';
};

Un truc du genre. ;)

Super merci, j'ai donc fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var last_id;
document.getElementById('indexAlpha').onclick = function(event) {
        // délégation d'évènement
	var target = event.target ? event.target : event.srcElement;
	// si il y a un id et si on clic sur une balise a
	if (target && target.tagName.toLowerCase() == 'a') {
		// enleve le background de l'id precedent
		if(last_id){
			document.getElementById(last_id).className = "";
			document.getElementById(last_id).background = "";
		}
		// sauvegarde de l'id precedent
		last_id = target.id;
		// ajout le background de l'id en cours
		document.getElementById(target.id).className = "active";
 
        ...
 
}

Fuseau horaire GMT +2. Il est actuellement 07h21.