Boucle en javascript

**voyageurdumonde** · 25/02/2011, 04h17

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 :

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
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 :

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

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

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

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
<?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** · 25/02/2011, 18h22

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 :

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
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** · 25/02/2011, 19h52

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 :

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

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** · 25/02/2011, 19h53

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 :

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

oParent.appendChild( oLien);

**voyageurdumonde** · 25/02/2011, 20h00

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** · 25/02/2011, 20h02

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** · 25/02/2011, 20h05

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** · 25/02/2011, 20h08

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** · 25/02/2011, 20h09

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!

Boucle en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager