ajax et cloneNode [Résolu]

socaw · 18/11/2011, 17h03

Bonjour,

Je développe une page avec une liste déroulante qui contient des produits et une zone de texte (désactivée) dans laquelle le prix du produit doit être affiché.

AJAX intervient au moment où on sélectionne un item de la liste, la zone de texte affiche alors le prix correspondant.

Le formulaire contient un bouton qui permet d'ajouter d'autres listes déroulantes et zones de texte. Suite à un autre post sur le forum, j'ai choisi de dupliquer la ligne au moyen de cloneNode (fonction ajouter() dans le fichier php).

Or la fonction affich_prix() qui fait appel à AJAX ne fonctionne que pour les premiers éléments de formulaire (atteints par leur id). Il faudrait donc que ma fonction "connaisse" l'id de la liste pour laquelle on vient de sélectionner un item. J'avais pensé passer this.id en paramètre de la fonction appelée via onchange, et passer cet argument aux getElementById, mais ça ne fonctionne pas.

Voici les différents codes.
La page php sans ma tentative de this.id

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
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>cloneNode</title>
</head>
 
<body>
 
<script>
	var lineIndex=0;
	function ajouter() {
		// au clic sur le boutton on ajoute une ligne de formulaire semblable à la première
		ligne = document.getElementById("line0").cloneNode(true);
		ligne.id="line"+(++lineIndex);
		document.getElementById("a_remplir").appendChild(ligne);
		// on modifie les names et id des éléments ajoutés
		leNewSelect = document.getElementById(ligne.id).getElementsByTagName("select")[0];
		leNewSelect.name='sel'+ligne.id;
		fonctionAjax = 'affich_prix('+lineIndex+')';
		leNewSelect.onchange = fonctionAjax;
		leNewInput = document.getElementById(ligne.id).getElementsByTagName("span")[0];
		leNewInput.id='span'+ligne.id;
	}
</script>
 
<script>
	//function affich_prix(argument) {
	function affich_prix() {
		//*
		// Instanciation de l'objet XHR
		var xhr = new XMLHttpRequest();
 
		// PREPARATION DE LA REQUETE : en POST car on envoi des infos d'un formulaire
		xhr.open("POST","ajax_prix.php",true);
 
		// on modifie l'entête d'envoi des données quand il s'agit de données envoyée depuis un formulaire
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
		// ENVOI DE LA REQUETE : envoie à ajax_prix.php l'élément pour lequel on veut un prix
		// on spécifie les paramètres à envoyer à la méthode send() quand on est en POST
		pourPrix = document.getElementById('selline0');
		selectedItem = pourPrix.options[pourPrix.selectedIndex].value;
		xhr.send("code="+selectedItem);
 
		// RECUPERATION DES INFOS
		// readystatechange permet de savoir si tout a été envoyé, traité, reçu correctement
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				// propriété responseText pour récupérer les données dans un autre format que le XML
				// la réponse est fournie sous la forme d'une chaine de caractère
				prix = xhr.responseText;
				document.getElementById('spanline0').innerHTML = prix;
			}
		}
		//*/
	}
</script>
 
<form method="post" action="#">
	<p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
	<div id="a_remplir">
		<p id="line0">
			<?php
				try {
				$bdd = new PDO('mysql:host=localhost;dbname=test','root','');
				} catch (Exception $e) {
				die('Erreur : ' . $e->getMessage());
				}
				$requete = $bdd->query('SELECT Code, Nom FROM produit LIMIT 0,5') or die(print_r($bdd->errorInfo()));
				echo '<select id="selline0" name="selline0" onchange="affich_prix();"><option value="NULL">Vide</option>';
				while ($data = $requete->fetch()) {
					echo '<option value="'.$data['Code'].'">'.$data['Nom'].'</option>';
				}
				$requete->closeCursor();
				echo '</select>';
			?>
			<span id="spanline0">Vide</span>
		</p>
	</div>
	<input type="submit" />
</form>
 
	<?php
		if (isset($_POST)) {
			echo '<pre>';
				print_r($_POST);
			echo '</pre>';
		}
	?>
 
</body>
</html>

La partie AJAX

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
<?php
	header('Content-Type: text/html; charset=utf-8'); 
	if(isset($_REQUEST["code"])){
		// connexion
		try {
			$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
		} catch (Exception $e) {
			die('Erreur : ' . $e->getMessage());
		}
		$code = $_REQUEST["code"];
		// requete
		$requete = $bdd->query('SELECT Prix FROM produit WHERE Code = '.$code) or die(print_r($bdd->errorInfo()));
		$data = $requete->fetch();
		echo '<input type="text" value="'.$data['Prix'].'" disabled />';
		$requete->closeCursor();
	}
	else {
		echo '<p>Problème</p>';
	}
?>

Bovino · 18/11/2011, 18h31

Un id doit être unique dans la page !
Lorsque tu fais ton cloneNode(), il faut que tu modifies son id afin qu'il soit unique.

Ceci dit

Citation:

J'avais pensé passer this.id en paramètre de la fonction appelée via onchange, et passer cet argument aux getElementById, mais ça ne fonctionne pas.

Euh... tu aimes bien te compliquer la vie apparemment

Plutôt que de passer this.id pour ensuite retrouver l'élément dont l'id correspond, pourquoi ne pas passer tout simplement this et avoir directement cet élément ?

socaw · 21/11/2011, 09h38

Bovino, merci pour tes réponses !

Dans la fonction ajouter(), il y avait deux lignes superflues, mais surtout j'avais oublié de modifier l'id du <select> nouvellement ajouté.
En parallèle à cela, j'ai changé l'argument passé à la fonction affich_prix() de this.id à this.

Le code fonctionne maintenant (testé sous FF 8.0 et IE 8). Voilà la version finale (la partie ajax reste la même que plus haut) :

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
<script>
 var lineIndex=0;
 function ajouter() {
  // au clic sur le boutton on ajoute une ligne de formulaire semblable à la première
  ligne = document.getElementById("line0").cloneNode(true);
  ligne.id="line"+(++lineIndex);
  document.getElementById("a_remplir").appendChild(ligne);
  // on modifie les names et id des éléments ajoutés
  leNewSelect = document.getElementById(ligne.id).getElementsByTagName("select")[0];
  leNewSelect.id='sel'+ligne.id;
  leNewSelect.name='sel'+ligne.id;
  leNewInput = document.getElementById(ligne.id).getElementsByTagName("span")[0];
  leNewInput.id='span'+ligne.id;
 }
</script>
 
<script>
 function affich_prix(arg) {
  //*
  var xhr = new XMLHttpRequest();
 
  // PREPARATION DE LA REQUETE
  xhr.open("POST","ajax_prix.php",true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	// ENVOI
  var pourPrix = document.getElementById(arg.id);
  var selectedItem = pourPrix.options[pourPrix.selectedIndex].value;
  xhr.send("code="+selectedItem);
 
  // RECUPERATION DES INFOS
  xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
    var prix = xhr.responseText;
    var idSpan = arg.id.replace(/sel/,"span");
    document.getElementById(idSpan).innerHTML = prix;
   }
  }
  //*/
 }
</script>
 
<form method="post" action="#">
 <p><input type="button" id="boutton_ajout" value="+" onclick="ajouter();" /></p>
 <div id="a_remplir">
  <p id="line0">
   <?php
    try {
    $bdd = new PDO('mysql:host=localhost;dbname=test','root','');
    } catch (Exception $e) {
    die('Erreur : ' . $e->getMessage());
    }
    $requete = $bdd->query('SELECT Code, Nom FROM produit LIMIT 0,5') or die(print_r($bdd->errorInfo()));
    echo '<select id="selline0" name="selline0" onchange="affich_prix(this);"><option value="NULL">Vide</option>';
    while ($data = $requete->fetch()) {
     echo '<option value="'.$data['Code'].'">'.$data['Nom'].'</option>';
    }
    $requete->closeCursor();
    echo '</select>';
   ?>
   <span id="spanline0">Vide</span>
  </p>
 </div>
 <input type="submit" />
</form>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email