Récupérer dans une variable php le contenu d'une <div>

jytest · 19/11/2011, 17h00

Bonjour,

Pouvez-vous m'aider ?
Je suis face à un souci important.
Comment, par une variable php, récupérer le contenu d'une div ?
Un petit exemple simplissime pour encadrer ma question.

Code :

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

1
2
 
<div id="tdi">test</div>

Code :

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

1
2
3
4
5
 
<?php
$ind=contenu de tdi
// idéalement $ind="test"
?>

J'ai même essayé cela :

Code :

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

$ind = "<script language='Javascript'> document.write('tdi'); </script>";

mais sans succès.

Comment faire ?

Je vous remercie d'avance pour vos réponses.
Bon weekend !

transgohan · 19/11/2011, 19h25

Quand on parle de HTML c'est ce qui est envoyé au navigateur. Son contenu est-il modifié après l'envoi par le serveur ? Auquel cas il faut passer par du javascript pour récupérer son contenu et de l'Ajax pour transmettre le contenu au serveur.

Si le contenu est "statique" lors de l'envoi au client, expliques nous un peu mieux la chose car il sera possible de le traiter avant l'envoi au navigateur par le script PHP.

jytest · 20/11/2011, 11h00

Comment faire ?
A l'aide svp

Comment faire en javascript ?
Car j'ai même essayé cela :

Code :

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

$ind = "<script language='Javascript'> document.write('tdi'); </script>";

mais sans succès !!

Oubliant l'exemple,
je me tourne maintenant vers le code réel.
Sachant que je veux gérer en php (pour les Bases de données) :
comment faire pour récupérer le contenu de "idcategorie02" dans une variable en php?

Voici le code javascript :

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
 
// categorie02
function gocategorie02() {
	document.getElementById("loader02").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td03').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post	
	xhr.open("POST","php/ajaxcategorie03.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie02');
	idcategorie02 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie02);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie02');
	if (selectValue == "" || selectValue == "none") {
		hidden = 3;
	} else {
		hidden = 4;
	}
	document.getElementById("tr03").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader02").style.display = "none";
}

Pour votre info, voici le contenu du fichier "php/ajaxcategorie03.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie03' id='categorie03' style='width:280px' onchange='gocategorie03()'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_categorie03".
			" WHERE parent=".$_REQUEST['ix'].
			" ORDER BY id");
        echo "<option value='none' ><span style='width:100%;' >-- Choisissez, svp ! --</span></option>";
		while ($back = mysql_fetch_assoc($query)) {	
			echo "<option value='".$back['id']."' ><span style='width:100%;' >".$back['libelle']."</span></option>";
		}
	}
	echo "</select>";
?>

transgohan · 20/11/2011, 14h20

Quel est le rapport entre ton problème initial et le dernier code que tu nous montres ?
A priori ce n'est pas un code que tu as fait sinon tu ne serais pas venu poser de questions.
Pour le fonctionnement de l'Ajax ton code est très bien commenté, il te suffit de le relire et de le comprendre point par point.
Quant à obtenir la valeur du div : var contenu = document.getElementById('tdi').innerHTML();

jytest · 20/11/2011, 16h16

Ceci pour montrer :
- que l'id "categorie02" est rempli par javascript !
- que la div était loin d'être statique !
- qu'il y avait de l'ajax dans la page !
- que tout ceci pour obtenir l'intérieur d'une div, afin de rechercher un enregistrement bien précis de bdd.

Alors pouvez-vous m'aider,
car mes bases en javascript (et en ajax) sont quasiment nulles ?
D'avance merci.

nextdev · 20/11/2011, 17h49

Citation:

comment faire pour récupérer le contenu de "idcategorie02" dans une variable en php?

Le récupérer pour en faire quoi ? L'envoyer ou ? Quand ?
idcategorie02 se trouve deja dans ta page html visiblement, il correspond à la valeur sélectionnée du select categorie02.

Quel div ? c'est quoi tdi ?

jytest · 20/11/2011, 20h37

Effectivement, idcategorie02 se trouve deja dans ta page html visiblement, il correspond à la valeur sélectionnée du select categorie02.
Tout comme idcategorie00 (index 1e select), tout comme idcategorie01 (index 2e select), tout comme idcategorie02 (index 3e select), tout comme idcategorie03 (index 4e select)...
Et c'est l'index du choix du 4e select, qui contient l'id du record dans la bdd réellement désirée !

Je veux la récupérer car elle contient un id d'enregistrement d'une 5e bdd en cascade...
De cette sorte, cela va m'éviter de rechercher le bon enregistrement plus facilement,
au lieu de passer par 5 bdd successives...

L'exemple parlant se trouve sur :
http://www.creaprint.be/new/boutique00.php

Comment faire ?
A l'aide svp

Oubliant l'exemple,
je me tourne maintenant vers le code réel.
Sachant que je veux gérer en php (pour les Bases de données) :
comment faire pour récupérer le contenu de "idcategorie02" dans une variable en php?

Voici le code javascript :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
 
<script type="text/javascript">
<!--
 
// Retourne la valeur du select selectId
function getSelectValue(selectId) {
	// On récupère l'élément HTML <select>
	var selectElmt = document.getElementById(selectId);
	// Correspond au tableau des balises <option> du select
	selectElmt.options;
	selectElmt.selectIndex;
	// Correspond à l'index du tableau options qui est actuellement sélectionné
	return selectElmt.options[selectElmt.selectedIndex].value;
}
 
var xhr = null;
// XMLHttpRequest
function getXhr() {	
	if (window.XMLHttpRequest)
		//Firefox et autres
		xhr = new XMLHttpRequest();
	else 
		// Internet Explorer
		if(window.ActiveXObject) {
			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 l'objet XMLHTTPRequest...");
			xhr=false;
		}
}
 
// categorie00
function gocategorie00() {
	document.getElementById("loader00").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td01').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie01.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat00
	sel = document.getElementById('categorie00');
	idcategorie00 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie00);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie00');
	if (selectValue == "" || selectValue == "none") {
		hidden = 1;
	} else {
		hidden = 2;
	}
	document.getElementById("tr01").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader00").style.display = "none";
}
 
// categorie01
function gocategorie01() {
	document.getElementById("loader01").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td02').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie02.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie01');
	idcategorie01 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie01);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie01');
	if (selectValue == "" || selectValue == "none") {
		hidden = 2;
	} else {
		hidden = 3;
	}
	document.getElementById("tr02").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader01").style.display = "none";
}
 
// categorie02
function gocategorie02() {
	document.getElementById("loader02").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td03').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post	
	xhr.open("POST","php/ajaxcategorie03.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie02');
	idcategorie02 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie02);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie02');
	if (selectValue == "" || selectValue == "none") {
		hidden = 3;
	} else {
		hidden = 4;
	}
	document.getElementById("tr03").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader02").style.display = "none";
}
 
// categorie03
function gocategorie03() {
	document.getElementById("loader03").style.display = "inline";
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td04').innerHTML = leselect;
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie04.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie03');
	idcategorie03 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie03);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie03');
	if (selectValue == "" || selectValue == "none") {
		hidden = 5;
	} else {
		hidden = 6;
	}
	document.getElementById("tr04").style.display = "";
	document.getElementById("tr05").style.display = "";
	document.getElementById("tr06").style.display = "";
	document.getElementById("tr07").style.display = "";
	document.getElementById("tr08").style.display = "";
	document.getElementById("tr09").style.display = "";
	document.getElementById("tr10").style.display = "";
	for (hidden=11; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
	document.getElementById("loader03").style.display = "none";
}
 
-->
</script>

Pour votre info, voici le contenu du fichier "php/ajaxcategorie03.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie03' id='categorie03' style='width:280px' onchange='gocategorie03()'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_categorie03".
			" WHERE parent=".$_REQUEST['ix'].
			" ORDER BY id");
        echo "<option value='none' ><span style='width:100%;' >-- Choisissez, svp ! --</span></option>";
		while ($back = mysql_fetch_assoc($query)) {	
			echo "<option value='".$back['id']."' ><span style='width:100%;' >".$back['libelle']."</span></option>";
		}
	}
	echo "</select>";
?>

et celui du fichier "php/ajaxcategorie04.php"
C'est de là que je dois précisément récupérer "$ind, pour l'utiliser dans ma page "boutique00.php" !!!
:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<?php
	require_once("connexionMysql.inc.php");
	if (isset($_REQUEST['ix'])) {
		$ind=$_REQUEST['ix'];
		$query = mysql_query("SELECT * FROM shop_articles".
			" WHERE id=".$_REQUEST['ix']);
		while ($back = mysql_fetch_assoc($query)) {	
			$ref= "réf. ".$back['reference'];
			$com= "réf. ".$back['commentaire'];
		}
	}
?>

nextdev · 20/11/2011, 23h15

Citation:

C'est de là que je dois précisément récupérer "$ind, pour l'utiliser dans ma page "boutique00.php" !!!

Tu as deja la valeur de $ind. (qui correspond à idcategorie03)
Mais par contre il te manque surement les valeurs $ref, $com... que tu souhaites afficher à priori (à l'étape final, avant validation panier)

Donc tu vas devoir ramener ces infos à javascript via xml :

ajaxcategorie04.php doit donc sortir un fichier structuré en xml, qui contient les infos à renvoyer.
javascript de son coté récupérera les infos via responseXML, puis modifiera ta page.
pour valider le panier, ce ne sera pas un lien, mais un bouton submit, d'un formulaire "caché" qui contiendra des inputs hidden avec les infos que tu souhaites enfin "passer à php" (et c'est donc javascript qui aura prérempli ces champs, lors de la réception de la réponse xml du fichier ajaxcategorie04.php)

Edit: Meuu... j'ai été un peu loin, continue comme tu fais avec responseText pour récupérer les infos.
Et il te reste donc le 3eme point à régler, tu n'as qu'a mettre le fameux form "caché" directement dans ajaxcategorie04.php.

jytest · 21/11/2011, 06h18

D'abord merci d'avoir pris le temps de la compréhension du code.
Mon problème est tout à fait là.

Dans un moment de bonté,
peux-tu m'aider dans cette dernière démarche,
en me codant cela ?

Car, tu vois, à mon avis, ce n'est qu'après affichage des infos ($ref, $com...) que l'utilisateur pourra confirmer sa ligne de commande. Je ne peux donc pas avoir de bouton submit à ce stade-là (dans ajaxcategorie04"), vu que cela s'affiche après par "boutique00.php" (la page-maître) ! Mais un peu après donc !

Quelquechose m'échappe peut-être !

Immense merci d'avance pour ton aide.

nextdev · 22/11/2011, 10h22

Mouarf... je t'aide à le faire, mais je te le fait pas

Bon, tu as bien réussi a planquer des selects dans les autres fichiers ajaxcategorie, alors je vois pas pourquoi tu pourrai pas y mettre un form ou/et les infos $ref $com...

Et donc ça afficherais ces fameuses infos + le form et son bouton submit (et du champs caché, notamment surement pour l'id), et puis béh c'est une fois qu'on cliquerais sur le submit, que ca partirai vers un traitement avec ta page boutique00.php.

jytest · 22/11/2011, 10h30

Oui, mais sans créer et appuyer sur un bouton submit, comment faire ?

Je précise ce que je souhaite.
C'est récupérer dans la page principale "boutique00.php", le contenu de la variable $ind ou $_REQUEST['ix'] de "ajaxcategorie04.php" !
Cette valeur va me permettre ainsi d'accéder directement à une bdd
dont l'id sera justement cette valeur !
Je précise aussi que cet id n'est connu qu'après sélection de choix effectués dans les 4 listes liées dynamiques.
Aidez-moi, svp !
Quelque chose m'échappe.
Cela doit être évident pour vous.
J'ai tout relu un nombre certain de docs sur XMLHttpRequest, mais je n'ai toujours pas trouvé de solution !
Au secours !

Cela va être long, mais je vous mets tous les codes utiles au bon fonctionnement.
D'avance, je vous remercie pour l'attention portée à mon post !

Voici "ajaxcategorie04.php"' :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?php
	require_once("connexionMysql.inc.php");
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_articles".
			" WHERE id=".$_REQUEST['ix']);
		while ($back = mysql_fetch_assoc($query)) {	
			$ind = $_REQUEST['ix'];
		}
	}
?>

Voici "ajaxcategorie03.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie03' id='categorie03' style='width:280px;' onchange='gocategorie03()'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_categorie03".
			" WHERE parent=".$_REQUEST['ix'].
			" ORDER BY id");
        echo "<option value='none' ><span style='width:100%;' >-- Choisissez, svp ! --</span></option>";
		while ($back = mysql_fetch_assoc($query)) {	
			echo "<option value='".$back['id']."' ><span style='width:100%;' >".$back['libelle']."</span></option>";
		}
	}
	echo "</select>";
?>

Voici "ajaxcategorie02.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie02' id='categorie02' style='width:280px;' onchange='gocategorie02()'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_categorie02".
			" WHERE parent=".$_REQUEST['ix'].
			" ORDER BY id");
        echo "<option value='none' ><span style='width:100%;' >-- Choisissez, svp ! --</span></option>";
		while ($back = mysql_fetch_assoc($query)) {	
			echo "<option value='".$back['id']."' ><span style='width:100%;' >".$back['libelle']."</span></option>";
		}
	}
	echo "</select>";
?>

Voici "ajaxcategorie01.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
 
<?php
	require_once("connexionMysql.inc.php");
	echo "<select name='categorie01' id='categorie01' style='width:280px;' onchange='gocategorie01()'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_categorie01".
			" WHERE parent=".$_REQUEST['ix'].
			" ORDER BY id");
        echo "<option value='none' ><span style='width:100%;' >-- Choisissez, svp ! --</span></option>";
		while ($back = mysql_fetch_assoc($query)) {	
			echo "<option value='".$back['id']."' ><span style='width:100%;' >".$back['libelle']."</span></option>";	
		}
	}
	echo "</select>";
?>

Voici toutes les fonctions javascript entre head et /head :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
 
<script type="text/javascript">
<!--
 
// Retourne la valeur du select selectId
function getSelectValue(selectId) {
	// On récupère l'élément HTML <select>
	var selectElmt = document.getElementById(selectId);
	// Correspond au tableau des balises <option> du select
	selectElmt.options;
	selectElmt.selectIndex;
	// Correspond à l'index du tableau options qui est actuellement sélectionné
	return selectElmt.options[selectElmt.selectedIndex].value;
}
 
var xhr = null;
// XMLHttpRequest
function getXhr() {	
	if (window.XMLHttpRequest)
		//Firefox et autres
		xhr = new XMLHttpRequest();
	else 
		// Internet Explorer
		if(window.ActiveXObject) {
			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 l'objet XMLHTTPRequest...");
			xhr=false;
		}
}
 
// categorie00
function gocategorie00() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("loader00").style.display = "none";
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td01').innerHTML = leselect;
		} else {
			document.getElementById("loader00").style.display = "inline";
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie01.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat00
	sel = document.getElementById('categorie00');
	idcategorie00 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie00);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie00');
	if (selectValue == "" || selectValue == "none") {
		hidden = 1;
	} else {
		hidden = 2;
	}
	document.getElementById("tr01").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
}
 
// categorie01
function gocategorie01() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("loader01").style.display = "none";
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td02').innerHTML = leselect;
		} else {
			document.getElementById("loader01").style.display = "inline";
		}
	}	
	// Ici on va voir comment faire du post
	xhr.open("POST","php/ajaxcategorie02.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie01');
	idcategorie01 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie01);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie01');
	if (selectValue == "" || selectValue == "none") {
		hidden = 2;
	} else {
		hidden = 3;
	}
	document.getElementById("tr02").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
}
 
// categorie02
function gocategorie02() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("loader02").style.display = "none";
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td03').innerHTML = leselect;
		} else {
			document.getElementById("loader02").style.display = "inline";
		}
	}
	// Ici on va voir comment faire du post	
	xhr.open("POST","php/ajaxcategorie03.php",true);
	// Ne ps oublier ç pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie02');
	idcategorie02 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie02);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie02');
	if (selectValue == "" || selectValue == "none") {
		hidden = 3;
	} else {
		hidden = 4;
	}
	document.getElementById("tr03").style.display = "";
	for (hidden; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
}
 
// categorie03
function gocategorie03() {
	getXhr();
	// On définit ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function() {
		// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
		if (xhr.readyState == 4 && xhr.status == 200) {
			document.getElementById("loader03").style.display = "none";
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options à la liste
			document.getElementById('td04').innerHTML = leselect;
		} else {
			document.getElementById("loader03").style.display = "inline";
		}
	}	
	// Ici on va voir comment faire du post
    xhr.open("POST","php/ajaxcategorie04.php",true);
	// Ne ps oublier ç pour le post
  	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// Ne ps oublier de poster les arguments
	// ici l'id de cat01
	sel = document.getElementById('categorie03');
	idcategorie03 = sel.options[sel.selectedIndex].value;
	xhr.send("ix="+idcategorie03);
	// Ouverture du tableau devis
	var selectValue = getSelectValue('categorie03');
	if (selectValue == "" || selectValue == "none") {
		hidden = 5;
	} else {
		hidden = 6;
	}
	document.getElementById("tr04").style.display = "";
	document.getElementById("tr05").style.display = "";
	document.getElementById("tr06").style.display = "";
	document.getElementById("tr07").style.display = "";
	document.getElementById("tr08").style.display = "";
	document.getElementById("tr09").style.display = "";
	document.getElementById("tr10").style.display = "";
	for (hidden=11; hidden<11; hidden++) {
		document.getElementById("tr0"+hidden).style.display = "none";
	}
}
 
-->
</script>

Voici la partie du html où se passe tout cela :

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
    <table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="280"></td>
        <td width="20"></td>
        </tr>
 
        <tr>
        <td colspan="3" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
 
        <tr>
        <td colspan="3" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
 
        <tr id="tr00">
        <td width="150" style="padding:7px;">Document</td>
        <td width="280" id="td00">
        	<select name="categorie00" id="categorie00" style="width:280px;" onChange="gocategorie00();" >
            <option value="none">-- Choisissez, svp ! --</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY id");
				while ($back = mysql_fetch_assoc($query)) {
					echo "<option value='".$back['id']."' ><span style='width: 280px;' >".$back['libelle']."</span></option>";	
				}
			?>
            </select>
        </td>
        <td width="20">
            <span id="loader00" class="hidden"><img src="images/boutique/loader16.gif" alt="loading" /></span>
        </td>
        </tr>
 
        <tr id="tr01" style="display:none;">
        <td width="150" style="padding:7px;">Descriptif</td>
        <td width="280" id="td01">
<!--    <select name="categorie01" id="categorie01" style="width:280px;"></select>  -->     
		</td>
        <td width="20">
            <span id="loader01" class="hidden"><img src="images/boutique/loader16.gif" alt="loading" /></span>
        </td>
        </tr>
 
        <tr id="tr02" style="display:none;">
        <td width="150" style="padding:7px;">Format</td>
        <td width="280" id="td02">
<!--    <select name="categorie02" id="categorie02" style="width:280px;"></select>  -->     
        </td>
        <td width="20">
            <span id="loader02" class="hidden"><img src="images/boutique/loader16.gif" alt="loading" /></span>
        </td>
        </tr>
 
        <tr id="tr03" style="display:none;">
        <td width="150" style="padding:7px;">Papier</td>
        <td width="280" id="td03">
<!--    <select name="categorie03" id="categorie03" style="width:280px;"></select>  -->  
        </td>
        <td width="20">
            <span id="loader03" class="hidden"><img src="images/boutique/loader16.gif" alt="loading" /></span>
        </td>
        </tr>
 
    	<tr id="tr04" style="display:none;">
        <td width="150"></td>
        <td width="280"></td>
        <td width="20"></td>
        </tr>
 
 
 
<?php
	$ind = $_REQUEST['ix'];
	echo "ind = ".$ind;
?>
 
 
 
    	<tr id="tr05" style="display:none;">
        <td width="150"></td>
        <td width="280">
			<?php
            	echo "ind. ".$ind."<br/>";
            	echo "réf. ".$ref."<br/>";
				echo "com  ".$com."<br/>";
            ?>
        </td>
        <td width="20"></td>
        </tr>   
 
 
        <tr id="tr06" style="display:none;">
        <td width="150" style="padding:7px;">&nbsp;</td>
        <td width="280">
			<?php
            	echo "com. ".$com;
            ?></td>
        <td width="20"></td>
        </tr>
 
        <tr id="tr07" style="display:none;">
        <td width="150" style="padding:7px;">Prix d'impression</td>
        <td width="280" id="td04"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
        <td width="20"></td>
        </tr>
 
    	<tr id="tr08" style="display:none;">
        <td width="150"></td>
        <td width="280"></td>
        <td width="20"></td>
        </tr>
 
        <tr id="tr09" style="display:none;">
        <td width="150" style="padding:7px;">&nbsp;</td>
        <td width="280" id="td05"><a href="panier.php">Ajouter au panier</a></td>
        <td width="20"></td>
        </tr>
 
        <tr id="tr10" style="display:none;">
        <td width="150" style="padding:7px;">&nbsp;</td>
        <td width="280" id="td05"><a href="panier.php">Ajouter au panier</a></td>
        <td width="20"></td>
        </tr>
 
 
    </table>

nextdev · 22/11/2011, 10h52

Moi pas comprendre ou tu veux en venir Précisément...

Si tu veux traiter autre chose avec cet id, pourquoi tu le ferais pas directement dans ajaxcategorie04.php.

Sinon l'id est la par exemple... :

Code :

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

1
2
3
4
5
6
7
function gocategorie03() {
...
sel = document.getElementById('categorie03');
idcategorie03 = sel.options[sel.selectedIndex].value;
xhr.send("ix="+idcategorie03);
alert(idcategorie03);
...

Mais bon, je vois pas ce que tu veux en faire... et à quel moment...

jytest · 22/11/2011, 12h15

Pour être encore plus clair, voici "ajaxcategorie04.php" (revu) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
	require_once("connexionMysql.inc.php");
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_articles".
			" WHERE id=".$_REQUEST['ix']);
		while ($back = mysql_fetch_assoc($query)) {	
			$ind = $_REQUEST['ix'];
			echo $back['id'];
		}
	}
?>

et dans "boutique00.php", je voudrais récupérer le contenu de "td04",
qui contient en sortie de "ajaxcategorie04.php", une valeur numérique bien nécessaire, car c'est l'id d'un enregistrement dans la bdd "shop_articles".
Cette valeur est identique à $ind et à $back['id'] dans "ajaxcategorie04.php" !

Comment récupérer cette satanée valeur ??? Pour moi pouvoir compléter la 2e partie de ma table (dans boutique00.php" ???

Car je ne peux pas remplir ma table (de "boutique00.php") depuis "ajaxcategorie04.php", vu qu'elle contient plusieurs td différents (avec des id différents) pour contenir (td par td) toutes les infos (une à une) ressorties de la bdd (designation, prix_ht, commentaire...)

nextdev · 22/11/2011, 14h16

Voui... béh c'est comme pour tes selects...
Alors soit tu fourres toute la fin de ta table html dans le fichier ajaxcategorie04 + un form.
Soit tu fais les choses carrées avec responseXML au lieu de responseText, et c'est javascript qui modifiera ta table html + créera le form.

Sans ce formulaire de validation, tu ne "transmettra jamais à php" la valeur de l'id de l'objet sélectionné... (via la page boutique00.php)

Bref il faut l'info de l'id, un form ou un lien avec l'id en paramètre dans l'url.

Thes32 · 25/11/2011, 14h15

Salut,

Tu peux utiliser une expression régulière :

Code :

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

1
2
3
4
5
 
$pattern = "#^<div.*>(.*)</div>$#";
$texte = '<div id="tdi">test</div>';
preg_match( $pattern, $texte, $matches );
$ta_variable = $matches[1];

19/11/2011, 19h25	#2
transgohan Membre Expert Baptiste ROUSSEL Étudiant Inscription : janvier 2011 Messages : 811 Détails du profil Informations personnelles : Nom : Baptiste ROUSSEL Localisation : France, Territoire de Belfort (Franche Comté) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : janvier 2011 Messages : 811 Points : 1 527 Points : 1 527	Quand on parle de HTML c'est ce qui est envoyé au navigateur. Son contenu est-il modifié après l'envoi par le serveur ? Auquel cas il faut passer par du javascript pour récupérer son contenu et de l'Ajax pour transmettre le contenu au serveur. Si le contenu est "statique" lors de l'envoi au client, expliques nous un peu mieux la chose car il sera possible de le traiter avant l'envoi au navigateur par le script PHP. __________________ Toujours se souvenir que la majorité des ennuis viennent de l'espace occupé entre la chaise et l'écran de l'ordinateur.
	00

20/11/2011, 14h20	#4
transgohan Membre Expert Baptiste ROUSSEL Étudiant Inscription : janvier 2011 Messages : 811 Détails du profil Informations personnelles : Nom : Baptiste ROUSSEL Localisation : France, Territoire de Belfort (Franche Comté) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : janvier 2011 Messages : 811 Points : 1 527 Points : 1 527	Quel est le rapport entre ton problème initial et le dernier code que tu nous montres ? A priori ce n'est pas un code que tu as fait sinon tu ne serais pas venu poser de questions. Pour le fonctionnement de l'Ajax ton code est très bien commenté, il te suffit de le relire et de le comprendre point par point. Quant à obtenir la valeur du div : var contenu = document.getElementById('tdi').innerHTML(); __________________ Toujours se souvenir que la majorité des ennuis viennent de l'espace occupé entre la chaise et l'écran de l'ordinateur.
	00

20/11/2011, 16h16	#5
jytest Inscription : février 2006 Messages : 17 Détails du profil Informations forums : Inscription : février 2006 Messages : 17 Points : -1 Points : -1	Ceci pour montrer : - que l'id "categorie02" est rempli par javascript ! - que la div était loin d'être statique ! - qu'il y avait de l'ajax dans la page ! - que tout ceci pour obtenir l'intérieur d'une div, afin de rechercher un enregistrement bien précis de bdd. Alors pouvez-vous m'aider, car mes bases en javascript (et en ajax) sont quasiment nulles ? D'avance merci.
	00

21/11/2011, 06h18	#9
jytest Inscription : février 2006 Messages : 17 Détails du profil Informations forums : Inscription : février 2006 Messages : 17 Points : -1 Points : -1	D'abord merci d'avoir pris le temps de la compréhension du code. Mon problème est tout à fait là. Dans un moment de bonté, peux-tu m'aider dans cette dernière démarche, en me codant cela ? Car, tu vois, à mon avis, ce n'est qu'après affichage des infos ($ref, $com...) que l'utilisateur pourra confirmer sa ligne de commande. Je ne peux donc pas avoir de bouton submit à ce stade-là (dans ajaxcategorie04"), vu que cela s'affiche après par "boutique00.php" (la page-maître) ! Mais un peu après donc ! Quelquechose m'échappe peut-être ! Immense merci d'avance pour ton aide.
	02

22/11/2011, 10h22	#10
nextdev Membre actif Inscription : février 2009 Messages : 150 Détails du profil Informations forums : Inscription : février 2009 Messages : 150 Points : 199 Points : 199	Mouarf... je t'aide à le faire, mais je te le fait pas Bon, tu as bien réussi a planquer des selects dans les autres fichiers ajaxcategorie, alors je vois pas pourquoi tu pourrai pas y mettre un form ou/et les infos $ref $com... Et donc ça afficherais ces fameuses infos + le form et son bouton submit (et du champs caché, notamment surement pour l'id), et puis béh c'est une fois qu'on cliquerais sur le submit, que ca partirai vers un traitement avec ta page boutique00.php.
	00

22/11/2011, 14h16	#14
nextdev Membre actif Inscription : février 2009 Messages : 150 Détails du profil Informations forums : Inscription : février 2009 Messages : 150 Points : 199 Points : 199	Voui... béh c'est comme pour tes selects... Alors soit tu fourres toute la fin de ta table html dans le fichier ajaxcategorie04 + un form. Soit tu fais les choses carrées avec responseXML au lieu de responseText, et c'est javascript qui modifiera ta table html + créera le form. Sans ce formulaire de validation, tu ne "transmettra jamais à php" la valeur de l'id de l'objet sélectionné... (via la page boutique00.php) Bref il faut l'info de l'id, un form ou un lien avec l'id en paramètre dans l'url.
	00

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