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

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/11/2009, 12h19
Lomic

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

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

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:

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
16/11/2009, 13h39
andry.aime

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

Fontion spot():

Code:

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:

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:

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:

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

16/11/2009, 17h39
E.Bzz

Bonjour,

Citation:

Envoyé par Lomic

"spot is not a function".

ici

Code:

spot = document.getElementById('spot_spot');

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

Bref, à renommer ;)

A+

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

Code:

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 ;)

16/11/2009, 17h52
Lomic

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

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

parce que ma variable spot n'était pas encore créée peut-être?
16/11/2009, 18h06
E.Bzz

Citation:

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+
16/11/2009, 18h34
Lomic

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

merci encore à tous les deux :)

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

je vous remets les fonctions:

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

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

17/11/2009, 12h34
E.Bzz

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

Cf. la FAQ ;)

A+

Citation:

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:

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)

Code:

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

Citation:

xhr_object is not defined

:roll:

Citation:

Envoyé par Bovino

J'imagine que tu dois avoir une erreur du style

:roll:

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

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

Et avec

Code:

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+

17/11/2009, 14h20
Lomic

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:

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 :)
17/11/2009, 14h30
E.Bzz

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+
17/11/2009, 14h34
Lomic

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

Code:

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:

select_spot = document.getElementById('select_spot');

qui semble fonctionner parfaitement :mouarf:

visiblement, appeler ma variable "spot" ne plaisait pas à IE, si vous avez une idée de la raison, ça m'intéresse :ccool:
17/11/2009, 14h42
E.Bzz

Citation:

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

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

A+
17/11/2009, 15h04
Lomic

Citation:

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 :ccool:
17/11/2009, 15h07
E.Bzz

Citation:

Envoyé par Lomic

il semble cependant que certains utilisateurs rencontrent encore des soucis, je suis en train de voir avec eux d'où cela peut provenir ;)

Il n'aurait pas tout simplement gardé l'ancienne version de ton .js dans le cache ??

A+

Voir 40 message(s) de cette discussion en une page