[AJAX] balise <div> et innerHTML

Bonjour à tous,

Je vais essayer d'expliquer mon probleme aussi clairement que possible.

J'ai sur un page un formulaire qui contient à la fois des champs textes et des listes déroulante dépendantes. Lors de mon choix sur la première liste, la deuxième liste s'affiche correctement, je peux choisir une valeur, etc.

Lorsque je regarde le code source de la page, j'ai toujours ma balise <div id="mabox">test</div> et lorsque je submit mon formulaire vers ma deuxième page, je ne vois pas la variable postée correpondant à ma deuxième liste.

Est-ce que : document.getElementById('mabox).innerHTML = xhr_object.responseText; (qui remplit ma seconde liste) est adapté à ce que je veux faire ?

Si ce n'est pas le cas, quelle méthode dois-je employer ?

Pourrais-tu nous mettre un peu de code ?

Page principale

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
94
95
96
97
98
 
<?php
require("protec/passe/conf.php3");
$db_link = mysql_connect($sql_serveur,$sql_user,$sql_passwd);
?>
<html>
<head>
<title>PROPOSITION</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />       
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .input {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FFFFFF; text-decoration: none; background-color: #333333; border: #000000; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin}
    -->
    </style>
</head>
<script type="text/javascript">
	function Creer_Garantie(id_prod)
	{
		var xhr_object = null; 
		var filename = "req_gar.php";
 
		if(window.XMLHttpRequest) // Firefox 
			xhr_object = new XMLHttpRequest(); 
		else if(window.ActiveXObject) // Internet Explorer 
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
		else { // XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			return; 
		}	 
 
		xhr_object.open("POST", filename, false); 
		xhr_object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr_object.send("id_prod="+id_prod); 
 
		if(xhr_object.readyState == 4) {
			if(xhr_object.status == 200){ 
				document.getElementById('garbox').innerHTML = xhr_object.responseText;
			}
		}
		//xhr_object.send(null);
	}
</script>
 
 
<body bgcolor="#FFFFFF">
    <center><img src="pics/banniere.jpg" align="MIDDLE" ></center>
    <br><br>
<p align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="2">Proposition Commerciale</font> </p>
 
<?
	//echo '<font face="Verdana, Arial, Helvetica, sans-serif" size="2">';
	echo '<form method="post" action="valid_propo.php">'."\n";
	//Commercial
	echo '<fieldset>'."\n";
	echo '<Legend>Commercial</legend>'."\n";
	$sql = 'SELECT * FROM prop_resp ORDER BY p_id_resp'."\n";	
	$req = mysql_db_query($sql_bdd, $sql, $db_link)  or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
	echo '<select name="Liste_resp" tabindex = "20" size="1">'."\n";
	echo '<option value="" selected=""></option>'."\n";	
	while($data=mysql_fetch_array($req)){
		echo '<option value="'.$data["p_id_resp"].'">'.$data["p_nom_resp"].' - '.$data["p_titre_resp"].' - '.$data["p_agence_resp"].'</option>'."\n";
	}
	echo '</select>'."\n";
	echo '</fieldset>'."\n";
 
[...]
 
	//Choix  du type de la gamme de produit
	echo '<fieldset>'."\n";
	echo '<Legend>Gamme de Produit</legend>'."\n";
	$sql = 'SELECT * FROM prop_produit ORDER BY p_id_prod';	
	$req = mysql_db_query($sql_bdd, $sql, $db_link)  or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
	echo '<select name="Liste_prod" size="1" onChange="Creer_Garantie(Liste_prod.value)">'."\n";
	echo '<option value="" selected=""></option>'."\n";
	while($data=mysql_fetch_array($req)){
		echo '<option value="'.$data["p_id_prod"].'">'.$data["p_nom_prod"].'</option>'."\n";
	}
	echo '</select>'."\n";
	echo '</fieldset>'."\n";
 
	echo '<fieldset>'."\n";
	echo '<Legend>Garantie</legend>'."\n";	
	echo '<div id="garbox">'."\n";
	echo '</div>'."\n";
	echo '</fieldset>'."\n";
 
	echo '<br><br>'."\n";
	echo '<div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1">'."\n";
	echo '<input type="submit" value="Valider" class="input">'."\n";
	echo '</div>'."\n";
	echo '</form>'."\n";
	echo '</font>'."\n";
?>
 
</p>
</body>
</html>

req_gar.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php
        header('Content-type: text/html; charset=iso-8859-1');  
        require("protec/passe/conf.php3");
        $db_link = mysql_connect($sql_serveur,$sql_user,$sql_passwd);
        
        $req  = 'SELECT p_nom_detail FROM prop_detail WHERE p_id_prod = "'.$_POST['id_prod'].'" ORDER BY p_id_detail'; 
        $result = mysql_db_query($sql_bdd, $req, $db_link)  or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
         
        echo '<select name="Liste_gar" id="Liste_gar"size="1">'."\n";
        while($r = mysql_fetch_array($result)) 
                echo '<option value="'.$r["p_id_detail"].'">'.$r["p_nom_detail"].'</option>'."\n";
        echo '</select>'."\n";
 
 
        @mysql_close($mysql_db); 
        
?>

Voilà le code utilisé. Le coté visuelle de la page marche nickel mais lors du submit vers valid_propo.php, "Liste_gar" n'existe pas. Tout mon problème est là et donc impossible de récupérer l'info de ce qui est selectionné dans la liste liée.

Bonjour,

Il me semble relever 2 erreurs dans ta fonction "Creer_Garantie()" :

Code:

xhr_object.open("POST", filename, false);

: filename doit être rempacé par "req_gar.php" car c'est ce fichier qui doit être appelé et "false" doit être remplacé par true car tu veux bien envoyer une variable de type POST à ton fichier php.

J'espère que cela t'aidera.

Bon travail.

Christophe

Citation:

Envoyé par dubitoph

Bonjour,

Il me semble relever 2 erreurs dans ta fonction "Creer_Garantie()" :

Code:

xhr_object.open("POST", filename, false);

: filename doit être rempacé par "req_gar.php" car c'est ce fichier qui doit être appelé et "false" doit être remplacé par true car tu veux bien envoyer une variable de type POST à ton fichier php.

J'espère que cela t'aidera.

Bon travail.

Christophe

Merci de ton aide.

La variable filename contient bien "req_gar.php" donc de ce coté là c'est ok. Si je met true au lieu de false, il ne se passe rien, la liste n'est pas mise à jour.
La communication avec le fichier php est (je pense) ok car l'affichage se fait correctement.