Actualiser le contenu d'un champs d'une autre fenêtre
Bonjour les profs,
J'explique le principe de mon site :
On a 4 pages :
- test1.php
- test2.php
- msg.php
- addmsg.php
test1.php et test2.php : contient 2 textarea une pour la réception des données un champs de texte et un bouton d'envoie, et des fonctions js pour récupérer des données en XML à partir de la page msg.php. Voilà le code :
test1.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
94
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
window.name="test1";
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 get_data(xhr)
{
var docXML= xhr.responseXML;
var items= docXML.getElementsByTagName("donnee");
var date= docXML.getElementsByTagName("donnee2");
//on fait juste une boucle sur chaque élément "donnee" trouvé
document.getElementById("radar").className="radaroff";
//Effacer lle contenue de la div
document.getElementById("oldmsg").value="";
for (i=0;i<items.length;i++)
{ document.getElementById("oldmsg").value+=items.item(i).firstChild.data; }
}
function send()
{
var xhr=getXhr();
// Ici on va voir comment faire du post
xhr.open("POST","addmsg.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//récupérer les valeur depuis les éléments de la page actuelle pour les envoyés vers la div de l'autre page
var user = document.getElementById('user').value;
var msg = document.getElementById('msg').value;
xhr.send("user="+user+"&msg="+msg);
//actualiser la div de la page courante
actualiser();
}
function actualiser()
{
var xhr=getXhr();
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { get_data(xhr); };
//on affiche le message d'acceuil
document.getElementById("radar").className="radaron";
//on appelle le fichier reponse.txt
xhr.open("POST", "msg.php", true);
xhr.send(null);
}
</script>
<style type="text/css">
.radaron{
visibility:visible;
}
.radaroff{
visibility:hidden;
}
</style>
</head>
<body onload="javascript:actualiser();">
<div class="radaroff" id="radar"><img src="radar.gif" height="32" width="32" /></div>
<textarea id="oldmsg" rows="15" cols="50" disabled="disabled"></textarea><br>
<br><br>
Utilisateur : <input type="text" id="user" /><br><br>
Message :<br>
<textarea id="msg" rows="5" cols="50"></textarea><br /><br />
<input type="button" value="Envoyer" onclick='javascript:send(); actualiser_dest();'/>
</body>
</html> |
test2.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
94
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript">
window.name="test2";
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 get_data(xhr)
{
var docXML= xhr.responseXML;
var items= docXML.getElementsByTagName("donnee");
var date= docXML.getElementsByTagName("donnee2");
//on fait juste une boucle sur chaque élément "donnee" trouvé
document.getElementById("radar").className="radaroff";
//Effacer lle contenue de la div
document.getElementById("oldmsg").value="";
for (i=0;i<items.length;i++)
{ document.getElementById("oldmsg").value+=items.item(i).firstChild.data; }
}
function send()
{
var xhr=getXhr();
// Ici on va voir comment faire du post
xhr.open("POST","addmsg.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//récupérer les valeur depuis les éléments de la page actuelle pour les envoyés vers la div de l'autre page
var user = document.getElementById('user').value;
var msg = document.getElementById('msg').value;
xhr.send("user="+user+"&msg="+msg);
//actualiser la div de la page courante
actualiser();
}
function actualiser()
{
var xhr=getXhr();
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { get_data(xhr); };
//on affiche le message d'acceuil
document.getElementById("radar").className="radaron";
//on appelle le fichier reponse.txt
xhr.open("POST", "msg.php", true);
xhr.send(null);
}
</script>
<style type="text/css">
.radaron{
visibility:visible;
}
.radaroff{
visibility:hidden;
}
</style>
</head>
<body onload="javascript:actualiser();">
<div class="radaroff" id="radar"><img src="radar.gif" height="32" width="32" /></div>
<textarea id="oldmsg" rows="15" cols="50" disabled="disabled"></textarea><br>
<br><br>
Utilisateur : <input type="text" id="user" /><br><br>
Message :<br>
<textarea id="msg" rows="5" cols="50"></textarea><br /><br />
<input type="button" value="Envoyer" onclick='javascript:send(); actualiser_dest();'/>
</body>
</html> |
msg.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?php
//Notez la ligne header('Content-Type: text/xml'); très importante c'est ce qui permet à PHP de dire au navigateur le format du fichier retourné.
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
//on connecte a la BDD
require_once("cnx.php");
//on lance la requete
$a=mysql_query("select * from messages order by date") or die("Erreur de séléction : ".mysql_error($cnx));
//On boucle sur le resultat
while ($row = mysql_fetch_array($a))
{
echo "<donnee>".$row['user']." dit : ".$row['msg']."\n ______________________ \n</donnee>\n";
}
echo "</exemple>\n";
?> |
addmsg.php
Code:
1
2
3
4
5
6
7
8
9
|
<?php
if(isset($_POST["user"])){
require_once('cnx.php');
$user=$_POST['user'];
$msg=$_POST['msg'];
mysql_query("insert into messages (user,msg) values ('$user','$msg')") or die("Erreur d'insertion : ".mysql_error());
}
?> |
Quand on clique sur le bouton envoyer la fonction send(); envoie les donnée via POST vers addmsg.php cette dernière contient une requête SQL d'insertion dans la table messages comme présenté dans le code.
Je clique sur le bouton envoyer de test1.php le texte s'ajout correctement dans le textarea de manière asynchrone sans recharger la page test1.php (AJAX) mais mon but c'est d'actualiser au même temps la valeur du textearea dans la page test2 au moment de l'insertion on utilisant qlq chose du genre
Code:
<script type="text/javascript"> test2.document.getElementById('msg').value=document.getElementById('msg'); </script>
Mais après une langue recherche je n'ai pas réussis à trouver un fonction js qui récupère le nom d'une autre page ou bien d’accéder au valeur des champs de test2.php à partir de test1.php.
Désoler pour la langueur du sujet :oops: mais c vraiment urgent dans mon projet de stage , et Merci d'avance...
