Boucle en javascript [Résolu]

[voyageurdumonde]

Bonjour,

tout d'abord, je connais tres mal javascript et je n'ai obtenu mon resultat que grace au bidouillage d'un code existant.

J'utilise le code suivant pour envoyer un lien dans une <div> grace a la fonction document.getElementById.

Ce lien permettra d'afficher la bulle du marqueur lorsque l'on clique dessus

J'ai modifie un code existant et je vais chercher les id avec l'attribut categorie (idcat).

Cela afin de faire correspondre le nom de ma DIV dans javascript et dans mon tableau fait avec php



cela fonctionne presque car je n'obtiens le lien "voir bon plan" que pour une seul div comme si javascript arretait sa boucle apres. Par contre j'ai bien tous les marquers sur la carte.

j'obtiens le message : Message: 'document.getElementById(...)' is null or not an object


Voici le code javascript

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<script type="text/javascript" src="http://www.google.com/jsapi?key="></script>
<script type="text/javascript">
 
google.load("maps", "2.x",{"other_params":"sensor=false"});
 
var maCarte;
 
var tableauMarqueurs = [];
 
var urlXml = "data1.php";
 
 
function creationDuMarqueur(point, nom, html, categorie) {
    var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "marker.png";
icon.iconSize = new GSize(18, 32);
	var marqueur = new google.maps.Marker(point,icon);
	marqueur.marqueurCategorie = categorie; 
	marqueur.marqueurNom = nom;
	google.maps.Event.addListener(marqueur, "click", function() {
		if(!marqueur.isHidden()){
			marqueur.openInfoWindowHtml(html);
		}
	});
 
	tableauMarqueurs.push(marqueur);
	return marqueur;
}
 
function afficheCategorie(categorie) {
 
	for (var i=0; i<tableauMarqueurs.length; i++) {
		if (tableauMarqueurs[i].marqueurCategorie == categorie) {
			tableauMarqueurs[i].show();
		}
	}
 
	document.getElementById("listeSelection"+categorie).style.display = "";
}
 
function masqueCategorie(categorie) {
	for (var i=0; i<tableauMarqueurs.length; i++) {
		if (tableauMarqueurs[i].marqueurCategorie == categorie) {
			tableauMarqueurs[i].hide();
		}
	}
 
	document.getElementById("listeSelection"+categorie).style.display = "none";
	maCarte.closeInfoWindow();
}
 
 
function clickLienListe(i) {
	google.maps.Event.trigger(tableauMarqueurs[i],"click");
}
 
function creationDeLaListeDeSelection() {
	var htmlalpha = "";
	for (var i=0; i<tableauMarqueurs.length; i++) {
			htmlalpha = '<div><a href="javascript:clickLienListe(' + i + ')">voir bon plans</a></div>';
	document.getElementById("listeSelection"+tableauMarqueurs[i].marqueurCategorie ).innerHTML=htmlalpha;
 
	}
 
}
 
 
function initialize() {
 
	maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
	maCarte.addControl(new google.maps.LargeMapControl());
	maCarte.addControl(new google.maps.MenuMapTypeControl());
	maCarte.setCenter(new google.maps.LatLng(47.382544, 0.690765), 9);
	google.maps.DownloadUrl(urlXml, function(doc) {
 
	var xmlDoc = google.maps.Xml.parse(doc);
	var marqueurs = xmlDoc.documentElement.getElementsByTagName("marker");
	for (var i = 0; i < marqueurs.length; i++) {
		var nom = marqueurs[i].getAttribute("nom"); 
		var adresse = marqueurs[i].getAttribute("adresse"); 
		var longitude = parseFloat(marqueurs[i].getAttribute("lng")); 
		var latitude = parseFloat(marqueurs[i].getAttribute("lat")); 
		var categorie = marqueurs[i].getAttribute("idcat");            
		var point = new google.maps.LatLng(latitude,longitude);
		var html =  "<b>" + nom;
		var marqueur = creationDuMarqueur(point, nom, html, categorie);
		maCarte.addOverlay(marqueur);
		tableauMarqueurs.sort();
	}
 
	creationDeLaListeDeSelection();
	});
}
 
google.setOnLoadCallback(initialize);
</script>

pour afficher la carte

Code :

<div id="EmplacementDeMaCarte" style="width: 100%; height:  100%">

et pour creer la liste des <div> ou vontapparaitre les lien

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
 
$sql = "SELECT * FROM menu WHERE pays='Canada' AND type='fastfood' ";
 
$requete1 = mysql_query( $sql, $link ) or die( "ERREUR MYSQL numéro: ".mysql_errno()."<br>Type de cette erreur: ".mysql_error()."<br>\n" );
 
while( $result1 = mysql_fetch_array( $requete1) )
{
echo '<table width="435" border="0" cellspacing="2" cellpadding="0">
 
  <tr>
    <td width="87" rowspan="2" valign="top"><div id="listeSelection'.$result1["id"].'"></div></td>
 
  </tr>
  </table>';
}
 
 
?>

Un grand merci pour votre aide.

[NoSmoking]

Bonjour,
si j'observe ta fonction creationDeLaListeDeSelection, on note que tu passe en référence le i à une fonction dans une boucle.
Pas mal de post traitent de ce problème dans les forums d'ici ou d'ailleurs.

Mais je pense que ta façon de voir le truc n'est pas des plus mieux...
- pourquoi une DIV, dans laquelle on mets une balise A, dans une DIV et non pas directement une balise A?
- pourquoi mettre un horrible javascript:clickLienListe sur le href du lien?
- pourquoi créer une fonction clickLienListe qui ne sert que dans la fonction creationDeLaListeDeSelection?

Une autre approche, en passant par la création DOM et non par innerHTML, existe et qui permet d'affecter la fonction directement sur l'élément créé.
par exemple

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function creationDeLaListeDeSelection(){
  var oLien, oParent;;
  var i, nb = tableauMarqueurs.length;
 
  for( i=0; i < tableauMarqueurs.length; i++) {
    oLien = document.createElement('A');
    oLien.setAttribute('href', '#');
    oLien.appendChild( document.createTextNode('voir bon plans'));
    // definition fonction sur lien
    oLien.onclick = function(){
      google.maps.Event.trigger( this.parentNode, "click"); // voir objet a passer
      return( false); // pour annuler l'action par defaut
    }
    // ajout element
    oParent = document.getElementById("listeSelection"+tableauMarqueurs[i].marqueurCategorie);
    oParent.appendChild( oLien);
  }
}

je ne suis pas sûr des éléments, pas regarder tout le code, pour le passage du paramètre à la fonction Event.trigger

[NoSmoking]

Envoyé par NoSmoking

je ne suis pas sûr des éléments, pas regarder tout le code, pour le passage du paramètre à la fonction Event.trigger

après avoir regardé un peu plus avant ton code je penses que la fonction sur le onclick qui devrait convenir est

Code :

1
2
3
4
5
6
7
    // definition fonction sur lien
    oLien.onclick = (function(obj) {
      return function(){
        google.maps.Event.trigger( obj, "click");
        return( false); // pour annuler l'action par defaut
      };
    })(tableauMarqueurs[i]);

[voyageurdumonde]

Merci j'ai remplace la fonction par la tienne mais j'obtiens le meme resultat avec cette fois ci comme erreur IE
Webpage error details



Message: 'null' is null or not an object
Line: 312
Char: 5
Code: 0
URI: http://www.bonplanvoyage.com/1/index...ays=Etats-Unis

la ligne 312 correspond a:

Code :

oParent.appendChild( oLien);

[voyageurdumonde]

Par contre la ou c'est tres bizarre c'est que si je fais un select uniquement avec

$sql = "SELECT * FROM menu WHERE pays='Canada'";

Ca fonctionne tres bien et je n'ai plus aucune erreur

[voyageurdumonde]

en fait si tous les lignes qui sont dans mon data1.xml ne correspondent pas exactement au meme nombre de DIV generer par select, ca plante

[andry.aime]

Bonsoir,

tableauMarqueurs[i].marqueurCategorie retourne quoi?
Fait un alert pour sa valeur et vérifie dans ton code HTML généré qui nous est invisible si l'élément avec l'id '"listeSelection"+tableauMarqueurs[i].marqueurCategorie' existe.

A+.

[voyageurdumonde]

En fait "listeSelection"+tableauMarqueurs[i].marqueurCategorie' va me donne les id 1,2,3,4,5

mais mon select qui cree les div uniquement 1,4,5 le probleme doit donc venir de ca.

La solution serait-elle de creer un data1.xml identique a mon select?

[NoSmoking]

il serait pas mal également qu'il y ai des noms explicites à la place de voirbon plans
pour info je n'ai pas d'erreur!

[voyageurdumonde]

C'est OK maintenant, Merci beaucoup NoSmoking et andry.aime pour votre aide et temps passe a m'aider

[andry.aime]

Je ne sais pas comment t'as faits mais pour se protéger de ce genre d'erreur, teste au début de la contenue du boucle si l'élément cible est présent

Code :

1
2
3
if(document.getElementById("listeSelection"+tableauMarqueurs[i].marqueurCategorie)){
// les instructions ici
}

A+.

[voyageurdumonde]

En fait comme je le mentionnais au debut je suis un bidouilleur de javascript. Je ne savais pas que si l'élément cible n'etait pas present cela allait faire une erreur. Et c'est ton message qui m'a fait allumer la-dessus.

Merci