[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