IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Actualiser le contenu d'un champs d'une autre fen�tre


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    D�veloppeur multim�dia
    Inscrit en
    Juillet 2011
    Messages
    21
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activit� : D�veloppeur multim�dia
    Secteur : Industrie

    Informations forums :
    Inscription : Juillet 2011
    Messages : 21
    Par d�faut 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 : 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 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 : 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 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 : 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
    //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 : S�lectionner tout - Visualiser dans une fen�tre � part
    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 : S�lectionner tout - Visualiser dans une fen�tre � part
    <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 mais c vraiment urgent dans mon projet de stage , et Merci d'avance...

  2. #2
    R�dacteur/Mod�rateur

    Avatar de SpaceFrog
    Homme Profil pro
    D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activit� : D�veloppeur Web Php Mysql Html Javascript CSS Apache - Int�grateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Pr�sident du CCMPTP (Comit� Contre le Mot "Probl�me" dans les Titres de Posts)
    Deux r�gles du succ�s: 1) Ne communiquez jamais � quelqu'un tout votre savoir...
    Votre post est r�solu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de D�veloppez !

  3. #3
    Membre averti
    Homme Profil pro
    D�veloppeur multim�dia
    Inscrit en
    Juillet 2011
    Messages
    21
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activit� : D�veloppeur multim�dia
    Secteur : Industrie

    Informations forums :
    Inscription : Juillet 2011
    Messages : 21
    Par d�faut
    Bon, merci tout d'abord pour la r�ponse c vraiment utile comme informations sur l'�change des donn�es entre les pages, j'ai remarqu� que la relation de parent� entre pages est obligatoire pour cet �change, sinon l'utilisation d'un pop-up comme int�rmidiaire... ce qui n'est le pas cas dans mon probl�me, les deux fen�tres sont totalement ind�pendantes l'une de l'autre, la 1�re connais le window.name de la 2�me t vise-versa... puis je veux changer le contenue du textarea de la 2�me au m�me temps que la 1�re any help les profs

    Cordialement

Discussions similaires

  1. Injecter le resultat d'un champs dans le champs d'une autre fen�tre
    Par sandddy dans le forum G�n�ral JavaScript
    R�ponses: 2
    Dernier message: 02/10/2009, 10h10
  2. R�ponses: 9
    Dernier message: 28/08/2007, 10h38
  3. R�ponses: 12
    Dernier message: 10/08/2007, 15h45
  4. supprimer le contenu d'un champ dans une table paradox
    Par ouldfella dans le forum Bases de donn�es
    R�ponses: 1
    Dernier message: 19/04/2006, 13h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo