[AJAX] onchange="fonction()" ne marche pas à chaque appel

**Lomic** · 16/11/2009, 12h19

Bonjour à tous,

J'ai utilisé le tuto des listes liées pour l'adapter à un site à moi, j'ai peiné un peu mais petit à petit je m'en suis sorti

il me reste cependant un souci, j'ai 4 listes déroulantes qui s'enchainent, la première conditionnant le contenu de la 2ème, qui elle conditionne la 3ème... ainsi de suite jusqu'à ma dernière qui me propose un choix qui déclenche l'affichage du contenu

Liste1: Pays > Liste2: Région > Liste3: Département > Liste4: Spot > Affichage fiche spot.

Tout ça fonctionne à merveille, c'est super.

Maintenant je souhaiterais pouvoir choisir un autre spot dans ma dernière liste et afficher la fiche de ce spot.

J'ai un événement "onchange" sur ma liste déroulante spot:

Code :

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

	echo '<select name="spot_spot" id="spot_spot" onchange="spot()">';

qui appelle la fonction "spot()", cela fonctionne d'ailleurs la première fois lorsqu'on a sélectionné liste après liste les critères de sélection, j'appelle bien ma fonction spot (j'ai mis un alert dedans) et la fiche du spot apparaît.

Si je sélectionne un autre spot, il ne se passe rien et la console d'erreur de mon navigateur (Firefox), me signale une erreur: "spot is not a function".

Il semble donc ne pas trouver la fonction "spot()" pourtant elle est dans la partie script dans le head de la page, et elle a bien fonctionné pour afficher la première fiche.

Je ne trouve pas pour quelle raison, lors d'une nouvelle sélection de spot, la fonction est introuvable...

C'est pourquoi je viens vers vous

Si vous avez des idées ou des pistes de recherche, je suis pour l'instant un peu coincé

Merci

Lomic

**andry.aime** · 16/11/2009, 13h39

Bonjour,
Montres nous la fonction spot() et le bout de code Html généré concerné.

**Lomic** · 16/11/2009, 17h36

Fontion spot():

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
function spot(){
  alert("appel fonction spot");
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      display_spot = xhr.responseText;
      document.getElementById('fiche_spot').innerHTML = display_spot;
    }
  }
  xhr.open("POST","include/ajaxFicheSpot.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  spot = document.getElementById('spot_spot');
  spot_id = spot.options[spot.selectedIndex].value;
  xhr.send("spot_id="+spot_id);
}

ajaxFicheSpot.php:

Code :

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

1
2
3
4
5
6
7
8
<?php
  include 'logguer.php';
  include 'db_connect.php';
    if(isset($_POST["spot_id"])){
      $spot_id=$_POST["spot_id"];
      include 'fiche_spot.php';
  }
?>

fiche_spot.php:

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
<?php
// fiche spot
 
$post_vars[]="spot_id";
 
foreach ($post_vars as $post_var) {
  if( isset( $_POST[$post_var] ) ) {$$post_var=$_POST[$post_var];} else {$$post_var="";}
}
 
$res = mysql_query("SELECT * FROM spots s, pays p, region r, dpt d WHERE s.spot_id='$spot_id' AND s.spot_dpt=d.dpt_id AND s.spot_region=r.region_id AND s.spot_country=p.pays_id") or die(mysql_error());
while($row = mysql_fetch_assoc($res)){
  $spot_id=$row["spot_id"];
  $spot_name=$row["spot_name"];
  $spot_continent=$row["pays_continent"];
  $spot_country=$row["pays_name"];
  $spot_region=$row["region_name"];
  $spot_dpt=$row["dpt_name"];
  $spot_link=$row["spot_link"];
  $spot_access=$row["spot_access"];
  $spot_parking=$row["spot_parking"];
  $spot_zone=$row["spot_zone"];
  $spot_school=$row["spot_school"];
  $spot_loc=$row["spot_loc"];
  $spot_wc=$row["spot_wc"];
  $spot_shower=$row["spot_shower"];
  $spot_shop=$row["spot_shop"];
  $spot_eat=$row["spot_eat"];
  $spot_guru_id=$row["spot_guru_id"];
}
 
// preparation valeurs des differents details du spot
if($spot_parking=="1"){ $spot_parking="Gratuit";} else{ $spot_parking="Payant";}
if($spot_school=="1"){ $spot_school="Oui";} else{ $spot_school="Non";}
if($spot_loc=="1"){ $spot_loc="Oui";} else{ $spot_loc="Non";}
if($spot_wc=="1"){ $spot_wc="Oui";} else{ $spot_wc="Non";}
if($spot_shower=="1"){ $spot_shower="Oui";} else{ $spot_shower="Non";}
if($spot_eat=="1"){ $spot_eat="Oui";} else{ $spot_eat="Non";}
if($spot_shop=="1"){ $spot_shop="Oui";} else{ $spot_shop="Non";}
 
switch ($spot_zone) {
    case 1: $spot_zone="Herbe"; break;
    case 2: $spot_zone="Terre"; break;        
    case 3: $spot_zone="Sable"; break;
    case 4: $spot_zone="Graviers"; break;
    case 5: $spot_zone="Galets"; break;
    case 6: $spot_zone="Bit&ucirc;me"; break;
}
 
$res2 = mysql_query("SELECT spot_comm FROM spot_orient WHERE spot_id=$spot_id")or die(mysql_error());
while($row = mysql_fetch_assoc($res2)){
  $spot_comm=$row["spot_comm"];
}
$year_date=date("Y");
$month_date=date("m");
$day_date=date("d");
$prev_year=$year_date - 1; // annee precedant l'annee en cours
$link_guru_stats='http://www.windguru.cz/fr/historie.php?id_spot='.$spot_guru_id.'&odden='.$day_date.'&odmes='.$month_date.'&odrok='.$prev_year.'&doden='.$day_date.'&domes='.$month_date.'&dorok='.$year_date.'&tj=c&wj=knots&step=3&pwindspd=1&psmer=1&ptmp=1&pmwindspd=1&odeslano=1&model=gfs';
$link_guru_prevs='http://www.windguru.cz/fr/index.php?sc='.$spot_guru_id;
 
?>
<h2><?php echo $spot_name.' :: '.$spot_continent.' / '.$spot_country.' / '.$spot_region.' / '.$spot_dpt;?></h2>
<span class="texte">
<table cellpadding="5" width="676" border="0">
  <tr>
    <td class="texte"><?php include 'rdv.php'; ?><br />
      <table>
      <tr><td><a href="<?php echo $link_guru_stats; ?>" title="Statistiques de vent pour le spot <?php echo $spot_name; ?> sur une année glissante" target="_blank"><img src="include/stats_wind2.png" alt="Statistiques de vent pour le spot <?php echo $spot_name; ?> sur une année glissante" width="46" height="32" border="0"></a></td><td class="texte">Statistiques de vent sur 1 an*</td></tr>
      <tr><td><a href="<?php echo $link_guru_prevs; ?>" title="Pr&eacute;visions de vent pour le spot <?php echo $spot_name; ?>" target="_blank"><img src="include/prev_wind.png" alt="Pr&eacute;visions de vent pour le spot <?php echo $spot_name; ?>" width="46" height="32" border="0"></a></td><td class="texte">Pr&eacute;visions de vent*</td></tr>
      </table>
 
    </td>
    <td class="texte" valign="top"><b>Pr&eacute;cisions sur les orientations de vent et conditions du spot:</b>  <br /><?php echo  utf8_encode($spot_comm) ; ?></td>
  </tr>
  <tr>
    <td class="texte">
      <iframe width="320" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php echo $spot_link; ?>&f=d&amp;output=embed"></iframe><br /><small><a href="<?php echo $spot_link; ?>&amp;source=embed">Agrandir le plan</a></small>
    </td>
    <td class="texte" valign="top">
      <b>Pr&eacute;cisions sur l'acc&egrave;s au spot:</b><br />
      <?php echo  utf8_encode($spot_access) ; ?><br />
      <b>D&eacute;tails:</b><br />
      Parking: <?php echo $spot_parking; ?> - 
      Gr&eacute;age: <?php echo $spot_zone; ?><br />
      WC: <?php echo $spot_wc; ?> - 
      Douche: <?php echo $spot_shower; ?><br />
      Ecole: <?php echo $spot_school; ?> - 
      Location: <?php echo $spot_loc; ?><br />
      Surf-Shop: <?php echo $spot_shop; ?><br />
    </td>
  </tr>
</table>
*(source <a href="http://www.windguru.cz" title="Windguru">Windguru</a>, si le spot choisi est un spot custom ou n'existe pas sur Windguru, c'est le spot le plus proche qui sert de source)
</span>

Le div affecté par les changements:

Code :

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

<div id='fiche_spot' style='display:inline'></div>

**E.Bzz** · 16/11/2009, 17h39

Bonjour,

Envoyé par Lomic

"spot is not a function".

ici

Code :

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

spot = document.getElementById('spot_spot');

"spot is an object".
... au mieux, une variable

Bref, à renommer

A+

**Lomic** · 16/11/2009, 17h50

il vient de là spot_spot: la liste déroulante n°4 avec la liste des spots

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
<?php
  include 'logguer.php';
  include 'db_connect.php';
        echo '<select name="spot_spot" id="spot_spot" onchange="spot()">';
        echo '<option value="-1">Choisir le spot</option>';
        if(isset($_POST["spot_dpt"])){
          $spot_dpt=$_POST["spot_dpt"];
                $res = mysql_query("SELECT DISTINCT spot_id,spot_name FROM spots WHERE spot_dpt='$spot_dpt' ORDER BY spot_name ASC") or die(mysql_error());
                while($row = mysql_fetch_assoc($res)){
                  $spot_name=utf8_encode($row["spot_name"]);
                  $spot_id=$row["spot_id"];
                        echo "<option value='".$spot_id."'>".$spot_name."</option>";
                }
        }
        echo "</select>";
?>

le nommage n'est pas des plus heureux mais en dehors de ça je ne vois pas ce qui gêne?

par contre tu veux peut-être dire que comme j'ai à la fois une variable spot et une fonction spot, c'est là que ça coince?

je vais tester ça, mais je me demande comment ça fait pour fonctionner la première fois

**Lomic** · 16/11/2009, 17h52

impec! c'était ça qui coinçait, merci de l'avoir vu, je serais passé à côté 20x

par contre j'aimerais comprendre pourquoi ça fonctionnait au premier appel?

parce que ma variable spot n'était pas encore créée peut-être?

**E.Bzz** · 16/11/2009, 18h06

Envoyé par Lomic

parce que ma variable spot n'était pas encore créée peut-être?

Exact, puisque tu ne la déclares pas

Elle n'est créée qu'au 1° appel de la fonction ...

A+

**Lomic** · 16/11/2009, 18h34

ok merci, j'ai compris l'origine de mon souci

merci encore à tous les deux

**Lomic** · 17/11/2009, 12h25

je vous relance pour un souci sur cette dernière fonction qui s'appelle affichSpot maintenant (afin de ne pas se marcher sur les pieds avec la variable "spot")

sous IE lorsqu'on modifie la sélection pour choisir un spot, il ne se passe rien (testé avec IE6 et 7), ce qui est bien sûr très gênant puisque je ne peux obliger mes visiteurs à utiliser le navigateur que je préfère

je vous remets les fonctions:

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
 
function getXhr(){
  var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	  try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
  return xhr;
}
 
function affichSpot(){
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      display_spot = xhr.responseText;
      document.getElementById('fiche_spot').innerHTML = display_spot;
    }
  }
  xhr.open("POST","include/ajaxFicheSpot.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  spot = document.getElementById('spot_spot');
  spot_id = spot.options[spot.selectedIndex].value;
  xhr.send("spot_id="+spot_id);
}

et le code Php impacté:

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
<?php
  include 'logguer.php';
  include 'db_connect.php';
        echo '<select name="spot_spot" id="spot_spot" onchange="affichSpot()">';
        echo '<option value="-1">Choisir le spot</option>';
        if(isset($_POST["spot_dpt"])){
          $spot_dpt=$_POST["spot_dpt"];
                $res = mysql_query("SELECT DISTINCT spot_id,spot_name FROM spots WHERE spot_dpt='$spot_dpt' ORDER BY spot_name ASC") or die(mysql_error());
                while($row = mysql_fetch_assoc($res)){
                  $spot_name=utf8_encode($row["spot_name"]);
                  $spot_id=$row["spot_id"];
                        echo "<option value='".$spot_id."'>".$spot_name."</option>";
                }
        }
        echo "</select>";
?>

merci à vous

**E.Bzz** · 17/11/2009, 12h34

N'est-ce pas seulement un problème de cache ?

Cf. la FAQ

A+

**Lomic** · 17/11/2009, 12h39

Envoyé par E.Bzz

N'est-ce pas seulement un problème de cache ?

ce problème de cache serait spécifique à IE? car sous Firefox, Safari ou Opera point de souci

d'ailleurs quand je teste de la façon suivante en ajoutant "xhr_object.setRequestHeader("Cache-Control","no-cache");":

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
function affichSpot(){
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      display_spot = xhr.responseText;
      document.getElementById('fiche_spot').innerHTML = display_spot;
    }
  }
  xhr.open("POST","include/ajaxFicheSpot.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr_object.setRequestHeader("Cache-Control","no-cache");
  spot = document.getElementById('spot_spot');
  spot_id = spot.options[spot.selectedIndex].value;
  xhr.send("spot_id="+spot_id);
}

mes listes déroulantes ne fonctionnent plus sous Firefox (pas testé ailleurs)

**Bovino** · 17/11/2009, 13h08

Code :

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

1
2
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr_object.setRequestHeader("Cache-Control","no-cache");

J'imagine que tu dois avoir une erreur du style

xhr_object is not defined

**Lomic** · 17/11/2009, 13h15

Envoyé par Bovino

J'imagine que tu dois avoir une erreur du style

oups

le boulet de service est passé par là... (je parle de moi hein qu'on ne se méprenne pas

)

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
function affichSpot(){
  var xhr = getXhr();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      display_spot = xhr.responseText;
      document.getElementById('fiche_spot').innerHTML = display_spot;
    }
  }
  xhr.open("POST","include/ajaxFicheSpot.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.setRequestHeader("Cache-Control","no-cache");
  spot = document.getElementById('spot_spot');
  spot_id = spot.options[spot.selectedIndex].value;
  xhr.send("spot_id="+spot_id);
}

comme ça mes listes fonctionnent mieux déjà... par contre la dernière ne m'affiche toujours pas ma fiche sous IE...

**E.Bzz** · 17/11/2009, 13h47

Et avec

Code :

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

1
2
3
4
5
6
7
 xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      display_spot = xhr.responseText;
      alert(display_spot);
      document.getElementById('fiche_spot').innerHTML = display_spot;
    }
  }

ça affiche bien ce que tu attendais ?

A+

**Lomic** · 17/11/2009, 14h20

oui tout à fait (sous FF)

sous IE pas d'alert

par contre une erreur js:
"Cet objet ne gère pas cette propriété ou cette méthode" pointant la ligne 95, caractère 3, ce qui en partant du code source de la page pointe sur:

Code :

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

 spot = document.getElementById('spot_spot');

cette erreur js n'apparait bien qu'à la sélection dans la dernière liste, décidément ce "spot" est mal aimé, je vais tenter en le modifiant lui aussi

cette fois cependant pas de risque de confusion avec le nom de la fonction, je me demande ce qui accroche

**E.Bzz** · 17/11/2009, 14h30

Alors, les autres erreurs étant corrigées, je pense que cette fois l'erreur est causée par l'injection du select dans la page via innerHTML qui peut poser problème dans un form (objet mal pris en compte dans le form).
Il faudrait que tu remplaces l'utilisation du innerHTML par une fonction Ajax créant l'objet via le DOM, comme dans cet exemple de la FAQ.

A+

**Lomic** · 17/11/2009, 14h34

bon bah j'ai remplacé la bête de cette façon:

Code :

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

spot = document.getElementById('select_spot');

(en renommant bien sûr l'ID de mon select, ce qui ne changeait rien

puis j'ai testé ça:

Code :

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

select_spot = document.getElementById('select_spot');

qui semble fonctionner parfaitement

visiblement, appeler ma variable "spot" ne plaisait pas à IE, si vous avez une idée de la raison, ça m'intéresse

**E.Bzz** · 17/11/2009, 14h42

Envoyé par Lomic

visiblement, appeler ma variable "spot" ne plaisait pas à IE, si vous avez une idée de la raison, ça m'intéresse

Tu as un objet dont l'id="spot" ?

A+

**Lomic** · 17/11/2009, 15h04

Envoyé par E.Bzz

Tu as un objet dont l'id="spot" ?

ben normalement non aucun, ils s'appellent tous "spot_qqch" sauf le dernier qui s'appelle "select_spot", et j'avais auparavant une fonction qui s'appelait "spot" qui était à l'origine du problème de fonctionnement qui a motivé ce sujet, mais je l'ai modifiée

j'ai testé sur mon vieux IE6 ça fonctionne très bien, il semble cependant que certains utilisateurs rencontrent encore des soucis, je suis en train de voir avec eux d'où cela peut provenir

merci pour vos questions/remarques qui m'ont permis de trouver l'origine de mon souci