Discussion :

[Juli3ns]

Bonjour à tous,

Après de longues heures à parcourir le forum pour de multiples raisons, j'ai décidé de franchir le pas de l'inscription... Et ce n'est pas pour la raison que j'aurais préféré... J'ai un problème que je n'arrive pas à résoudre...

Celui-ci est semblable au problème rencontré ici:
http://www.developpez.net/forums/d46...-denvous-post/

J'essaye de récupérer ma variable postée, qui apparait bien dans Firebug mais un isset($_POST['maVariable']) n'est jamais vrai.

Voici mon code:

Le but du script est de remplir un select "ville" en fonction du contenu d'un input "cp". J'utilise donc pour faire des tests un appel de ma fonction javascript sur l'évenement onblur de l'input "cp":

Code :

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

<input type="text" id="cp" name="cp" value="<?php if (isset($cp)) echo $cp; ?>" style="width:60px;" onblur="this.className='normal'; get_ville();" onfocus="this.className='focus';" />

Ma fonction get_ville (la vérification est pour l'instant très simplifiée pour la phase de test):

Code :

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

1
2
3
4
5
6
7
8
9
10
function get_ville() {   
    if (document.getElementById('cp').value.length == 5) {   
        var cp = document.getElementById('cp').value;
        return !sendCp(
        'POST',
        'nav.php?p=informations',
        'cp='+cp);
    } else
        alert('Code postal non valide');
}

La fonction "sendCp" :

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
function sendCp(method, url, data) {
 var xmlhttp = getHTTPObject();
 if (!xmlhttp) {
  return false;
 }
 if(method == "GET") {
  if(data == 'null') {
   xmlhttp.open("GET", url, true);
  } else {
   xmlhttp.open("GET", url+"&"+data, true);
  }
  xmlhttp.send(null);
 } else if(method == "POST") {
  xmlhttp.open("POST", url, true);
  xmlhttp.onreadystatechange = statutChangeCp;
  xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  xmlhttp.send(data);
 }
 return true;
}

Et enfin la fonction "statutChangeCp":

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function statutChangeCp() {
 if (xmlhttp.readyState == 1) {
  document.getElementById("vcp").innerHTML = "<img src='images/loader_circ.gif' width='15' height='15' alt='Veuillez patienter...' />";
 } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
  try {
    xmlDoc = xmlhttp.responseXML;
    document.getElementById("vcp").innerHTML = "";
  }
  catch (e) {
   alert("Erreur lors de la lecture de la réponse: " + e.toString());
  }
 }
}

Le post est d'apres firebug bien passé mais ma variable php $_POST['cp'] reste toujours vide et n'est d'ailleurs pas définie. Mon readyState passe bien à 4 aussi. Le traitement est donc complet et sans erreur. Pourtant je dois bien en faire une...

Malheureusement, mon 'Content-type','application/x-www-form-urlencoded' est je pense correct donc mon erreur n'est, je pense, pas la même que dans le message indiqué plus haut.

Note: Si je soumet le formulaire par le bouton submit tout fonctionne mais le but est évidemment de ne pas resoumettre la page.

Je suis désespérément à la recherche d'une piste ou même, d'une solution :p

Merci de m'avoir lu.

[E.Bzz]

Bonjour et bienvenue sur Developpez.com, donc
tu passes aussi un paramètre (p) dans l'url

Code :

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

1
2
'nav.php?p=informations',
'cp='+cp);

Est-ce que ça ne pose pas problème côté PHP ? Est-ce que le traitement PHP effectué est celui attendu ? (comment se passe ce traitement si "p" n'est pas récupéré ?).
Ma question derrière tout ça est : as-tu essayé avec

Code :

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

1
2
'nav.php',
'p=informations&cp='+cp);

?

A+

[Juli3ns]

Bonjour,

D'abord merci de m'avoir lu et répondu.

Le paramètre p est le nom de la page; par exemple la page sur laquelle je travail est accessible par /nav.php?p=informations. Mon but est donc de poster mon code postal cp sur cette page. C'est pourquoi j'ai procédé ainsi.

Voilà l'affichage Firebug qui me parait cohérent:

Code :

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

1
2
3
4
5
6
7
8
 
POST http://localhost/.../nav.php?p=informations 200 OK 62ms
 
Post: 
Paramètres               application/x-www-form-urlencoded
cp 77170
Source
cp=77170

En utilisant le code ci-dessous cela reviendrait à poster les 2 variables dans nav.php non ? Dans ce cas, ça n'irait pas.

Code :

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

1
2
'nav.php',
'p=informations&cp='+cp);

Merci

[E.Bzz]

Si tu fais un

Code :

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

alert(data)

juste avant le send, le paramètre est-il généré correctement ?
Peut-on voir le code où tu récupères "cp" côté PHP ?
Sinon, même si ça n'a sûrement pas d'impact ici, ta variable "cp" risque de poser problème avec IE, car elle correspond à l'id d'un élément de la page.
Pour améliorer la compatibilité, il vaudrait mieux la renommer ...

A+

[Juli3ns]

Un alert avant le send m'affiche cp=77170

Coté php, je fais un

Code :

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

1
2
if (isset($_POST['cp']))
  $cp = $_POST['cp'];

C'est vrai que mon nommage n'est pas terrible, je vais le corriger.

Merci

[E.Bzz]

ma variable php $_POST['cp'] reste toujours vide et n'est d'ailleurs pas définie.

Quelle réponse génère ton PHP dans ce cas ?

Mon readyState passe bien à 4 aussi. Le traitement est donc complet et sans erreur. Pourtant je dois bien en faire une...

Quel est le comportement ? La liste cible est inchangée ? Elle se vide ?
Je ne vois pas comment le traitement peut se dérouler correctement si la paramètre n'est pas récupéré
Y a peut être une fausse piste la dessous ...

A+

[Juli3ns]

Je ne suis pas certain d'avoir bien compris les questions, je vais essayer de répondre quand même.

Quelle réponse génère ton PHP dans ce cas ?

Lorsque $_POST['cp'] est vide, mon select contenant les villes n'est pas renseigné.

Quel est le comportement ? La liste cible est inchangée ? Elle se vide ? A+

Si je place un alert lorsque readyState vaut 4, celui-ci sera bien affiché.

Merci

[E.Bzz]

Lorsque $_POST['cp'] est vide, mon select contenant les villes n'est pas renseigné.

Ça c'est plutôt une réponse à la 2° question (comportement)
Ce que je voulais savoir c'est ce que contient ton xmlhttp.responseXML dans ce cas (avec un alert() par exemple).

Si je place un alert lorsque readyState vaut 4, celui-ci sera bien affiché.

Ca signifie simplement qu'il n'y a pas de plantage JS.

Par contre, je ne vois pas où tu récupères le XML pour l'insérer dans le <select>

A+

[Juli3ns]

Un alert sur xmlhttp.responseXML m'affiche objectXMLDocument.

Par contre, je ne vois pas où tu récupères le XML pour l'insérer dans le <select>

Bingo, je n'ai rien fait pour... Je dois me tromper ici.

Je pensais qu'il était correct de faire simplement:

Code :

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

1
2
3
4
5
6
7
8
9
10
if (isset($_POST['cp'])) {
  $cp = $_POST['cp'];
  //Requete de récupération des villes
 }
...
...
if (isset($cp)) {
  for ($i=0; $i<count($villes); $i++)
  echo '<option value="'.$villes[$i][0].'">'.$villes[$i][1].'</option>';
}

Je ne sais donc pas comment faire... Si j'ai bien compris, il me manque le X d'Ajax ?!

[E.Bzz]

Si j'ai bien compris, il me manque le X d'Ajax ?!

En quelques sortes, oui ... sauf que ton X n'en est pas un : la réponse générée n'est visiblement pas du XML
C'est simplement la liste des options.

Il va falloir que tu revois cette partie-là

Tu peux t'inspirer de ce tuto de siddh sur les listes liées.
Attention, toujours pour IE, comme dans le tuto, il faut que ta réponse Ajax contienne aussi les balises <select> et </select> (en plus des options)

A+

[Juli3ns]

Merci pour ton aide, je vais étudier ce tuto. Je reviens clore le sujet une fois que j'ai réussi

[E.Bzz]

Je m'aperçois que mon post précédent est peut-être ambigüe : la réponse ne doit pas nécessairement être au format XML.
Par contre, dans ce cas (réponse en simple texte), il faut utiliser responseText au lieu de responseXML

Ton erreur était donc d'utiliser responseXML sans formatage XML.

D'où le "X qui n'en était pas un"

A+

[Juli3ns]

Oui en effet, j'avais trouvé mon erreur avant de lire ta réponse.

En haut de ma page php, j'utilisais

Code :

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

1
2
 
header('Content-type: application/xhtml+xml');

je pensais donc pouvoir utiliser le reponseXML.

Dans le tuto, je vois:

Code :

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

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200){
 leselect = xhr.responseText;
 // On se sert de innerHTML pour rajouter les options a la liste		 
 document.getElementById('livre').innerHTML = leselect;
}

Je pense qu'il faut remplacer leselect par quelques chose mais je ne trouve pas par quoi, je vais donc approfondir mes recherches sur responseText.

Merci encore

[E.Bzz]

Je pense qu'il faut remplacer leselect par quelques chose mais je ne trouve pas par quoi

Non non : c'est tout bon comme ça

Code :

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

1
2
3
 leselect = xhr.responseText;
 // On se sert de innerHTML pour rajouter les options a la liste		 
 document.getElementById('livre').innerHTML = leselect;

leselect récupère la réponse Ajax avec cette instruction

Code :

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

leselect = xhr.responseText;

Il est ensuite affecté au innerHTML du div (livre) qui contient le <select> cible.

Ce sera tout à fait en phase avec ton code à toi ... une fois que tu auras ajouté les tag <select> (avec ses propriétés) et </select> dans ta réponse Ajax

A+

[Juli3ns]

J'ai eu du mal à revenir sur le forum.

Enfaite la principale différence entre le tuto et mon cas, c'est que ma page ne comporte pas que de l'information utile. J'ai donc créé un paragraphe qui se remplit avec les villes. Ensuite j'attribue son contenu au <select> des villes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if ( (isset($_POST['cp'])) || (isset($_POST['cpLiv']))) {
  $listeVille = "";
  if (isset($_POST['cp']))
   $cp = $_POST['cp'];
  else
   $cp = $_POST['cpLiv'];
  $villes = $cmde->get_villes($cp);
  for ($i=0; $i<count($villes); $i++)
   $listeVille = $listeVille.'<option value="'.$villes[$i][0].'">'.$villes[$i][1].'</option>';
  if ($listeVille == "") {
   $listeVille = '<option value="rien">Code postal inconnu</option>';
  }
  echo' <p id="listeville">'.$listeVille.'</p>';
 }

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function statutChangeCp() {
 if (xmlhttp.readyState == 1) {
  document.getElementById("vcp").innerHTML = "<img src='images/loader_circ.gif' width='15' height='15' alt='Veuillez patienter...' />";
 } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
  try {
	xmlDoc = xmlhttp.responseXML;
	document.getElementById("ville").innerHTML = xmlDoc.getElementById("listeville").innerHTML;
	document.getElementById("vcp").innerHTML = "";
  }
  catch (e) {
   alert("Erreur lors de la lecture de la réponse: " + e.toString());
  }
 }
}

Maintenant mon code fonctionne impeccable ! Je ne sais pas si c'est le bon moyen de faire de charger un <p> avec le contenu ?

Merci encore, j'ai réalisé pas mal de choses grâce à toi !

Ps: Tu remarqueras que j'ai gardé le responseXML comme ma page contient

Code :

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

header('Content-type: application/xhtml+xml');

[E.Bzz]

J'ai eu du mal à revenir sur le forum.

Idem

Ps: Tu remarqueras que j'ai gardé le responseXML

Oui, mais c'est un tort, je pense, car ce n'est pas du XML

Sinon, je ne vois pas de balises <select>
Tu envoies les options directement dans <p></p> ?
(à mon avis ces <p> sont inutiles : ils te servent à quoi ?)

"ville" est quel type d'objet ? Si c'est le <select> lui-même, ça ne fonctionnera pas avec IE (comme déjà dit)

A+

[Juli3ns]

Les balises select sont écrites en dur:

Code :

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

1
2
3
<select name="ville" id="ville" style="width:315px; display:inline;">
 <option value="rien">Veuillez saisir un code postal...</option>
</select>

Tu envoies les options directement dans <p></p> ?
(à mon avis ces <p> sont inutiles : ils te servent à quoi ?)

Le <p> me permet de retrouver après mes options avec

Code :

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

xmlDoc.getElementById("listeville").innerHTML;

[E.Bzz]

Les balises select sont écrites en dur:

Je parlais de celles de la réponse Ajax ...

Le <p> me permet de retrouver après mes options avec

Code :

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

xmlDoc.getElementById("listeville").innerHTML;

Tu n'as pas besoin de ça : relis le tuto sur ce point.

Parce que là ça te donne un code faux

Code :

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

<select><p><option>...

est une erreur de syntaxe en HTML (même si ton nav te masque cette erreur )

A+

[Juli3ns]

Tu n'as pas besoin de ça : relis le tuto sur ce point.

Sur le tuto, le fichier ajaxLivre.php contient uniquement la valeur que l'on recherche. Moi mon fichier contient beaucoup plus. Je ne vois pas comment je pourrais faire autrement ?

[E.Bzz]

Sur le tuto, le fichier ajaxLivre.php contient uniquement la valeur que l'on recherche.

On ne doit pas parler du même passage
Je faisais référence au § IV-A. "Listes liées" qui correspond exactement à ton cas, me semble-t-il : alimentation d'une liste de livres en fonction de l'auteur choisi ...

EDIT : ceci dit, quelque soit le nombre de lignes ramenées ( = de réponses), le principe est strictement le même ...

A+