actualiser un div avec XMLHttpRequest() Fermé

Question

Bonjour,

je voudrais actualiser plusieurs champs de mon formulaire situé à l'intérieur d'un div à l'aide de fonction avax utilisant un XMLHttpRequest().

Mon soucis est que je ne ne sais pas comment acceder aux différents input text et liste déoulante de mon div et afficher des infos issue d'une base de donné

Merci pour ceux qui peuvent m'éclairer

briiiiix · Accepted Answer

Ok, je vois où t'n veux revenir,
En faite il faut que tout soit enchainé, je me suis battu avec le temps puisque j'ai bcp de travail afin de te créer un exemple complet de fonction js qui manipule un champs de texte dont l'id est "texte1" de façon asynchrone.
Le données sont recueillis depuis un fichier php "traitement.php" qui pourra contenir le script suivant:

<? print "ceci est un test"?>

La fonction js manipulant l'ajax est la suivante: (préviens moi si t'as besoin de comprendre un truc dedans)


function requete_ajax()
{
		var dataRequest = null; 
		document.getElementById('texte1').value = 'patientez';
		
		// Définition du connecteur en fonction du navigateur :
		if (window.XMLHttpRequest)
		{
 			dataRequest = new XMLHttpRequest();
			if (dataRequest.overrideMimeType) 
			{
				dataRequest.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				dataRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)	{
				try {
					dataRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					document.getElementById('texte1').value = 'Impossible de communiquer avec le serveur';
				}
			}
        }
		// le secret d'AJAX réside en partie dans la réception et le traitement des résultats en background :
		dataRequest.onreadystatechange = function()
		{ 
			document.getElementById('texte1').value = 'veuiller patienter';
			if( dataRequest.readyState == 4 )
			{
				// Ici le code 200 signifie que la requête a renvoyé une valeur valide. On pourrait aussi gérer les erreurs 500, 404 ...
                                if( dataRequest.status == 200 )
				{
					if ( dataRequest.responseText != "" )
					{
						document.getElementById('texte1').value = dataRequest.responseText ;
					} else {
						document.getElementById('texte1').value = dataRequest.responseText ;
					}
				}
				else	
				{
					document.getElementById('texte1').value = 'Une erreur est survenue : ';
				}	
			} 
		};
		// le secret d'AJAX réside également dans l'envoi de la requête en background ( sans recharger la page ) :
		dataRequest.open("GET", "traitement.php?parametre=" + 1 , true); 
		dataRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		dataRequest.send(null); 
	}

briiiiix · Answer

Il suffit de donner un id unique a tout element et d'utiliser la fonction suivante:

document.getElementById('id_element').value = 'valeur';

J'espère que ça te convien, sinon je suis la

comalias94 · Answer

Merci briiiiix 
 le pb c'est que dans 
document.getElementById('id_element').value = 'valeur'; 

'valeur' est la réponse qu'envoie l'objet XMLHttpRequest()

dans l'exemple suivant je met la réponse dans la variable leselect

leselect = xhr.responseText;

Le contenue de leselect est, si je me trompe pas, un ensemble de donnée que je récupère à partir d'une base MySQL

Mon soucis et que je ne sais pas comment filtrer leselect pour mettre les donnés que je veut aux différent id_lement de mon formulaire , j'arrive à actualiser un champ
avec cette instuction

document.getElementById('Id_element').value = leselect;

Mais dans le cas de plusieurs Id_element je ne sais pas comment faire 

Merci

comalias94 · Answer

merci briiiiix pour ton aide

Si j'ai bien compris dans ton exemple tu met le contenu du message dataRequest.responseText dans le chanp de type texte d'id 'texte1'. Pour un champs sa va j'arrive à l'actualiser.

Mais quant qu'il s'agit de plusieurs champs à actualiser à partir de la réponse dataRequest.responseText sa se complique.

Moi j'ai plusieurs champs de type texte et des liste déroulante à actualiser jusqu'a mintenant j'ai réussi à actualiser plusieurs champs text avec la méthode suivante

dataRequest.responseText.split(',') 

que je met dans un tableaux , ce qui met permet de diriger chaque élément du tableau dans les champs type text.

Mon souci est l'actualisation de mes liste déroulantes à partir du meme dataRequest.responseText 

Comment faire ?

briiiiix · Answer

Tu veux modifier la liste des choix ?

comalias94 · Answer

Mon formulaire contient une liste déroulante et en fonction du choix séléctionné d'autre élément de mon formulaire sont remplit dynamiquement il y a des input text et d'autres listes déroulantes

briiiiix · Answer

Dans le cas de menus deroulants, tu construits ton code html dans ta page php et tu renvoi tout le code par la même methode httpRequest, finalement tu remplace la fonction
document.getElementById('texte1').value = dataRequest.responseText ;
par:
document.getElementById('div1').innerHTML = dataRequest.responseText ;

Bien evidemment "div1" est l'id du div qui va contenir ton menu deroulant.

J'espère que c'est claire, sinon je suis toujours là

comalias94 · Answer

Là j'avoue j'ai un peu de mal à te suivre voilà mom formulaire : *******************************************************************************************

Inputs nécéssaires à la production

NEW INPUT :

Nom : ---------------------------------------------------------------------------------------------------------------------------------------------------------------
Chemin importation :

Non du fichier :

Chemin de sauvegarde :

Non sauvegarde :

Entrée nécessaire pour le traitement ?

type d'input :

--------------------------------------------------------------------------------------------------------------------------------------------------------------- ******************************************************************************************* Comme tu peut le voir je déclanche une fonction ajax go() dans mon premier

briiiiix · Answer

Je ne vois pas ce que tu veux faire.
Tu vaux remplire des chams et selectionner des valeurs dans des menus ou recharger de nouveau des menus ?

comalias94 · Answer

En fait je veux faire les trois à la fois :

- remplir des champs texte
- selectionner des valeurs dans des menu
- charger des option dans d'autres menu

briiiiix · Answer

D'acc, fais voir ton code js, stp

comalias94 · Answer

ok voici ma fonction js :

******************************************************************************************

function go(){
var xhr = getXhr(); // ici j'appelle une fonction qui me créer un new XMLHttpRequest()
				
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
                leselect = xhr.responseText;
	var tableau = leselect.split(',');
	var k=0;
								//document.getElementById('NomFichier').value = leselect;
								document.getElementById('CheminImportation').value = tableau[0];
								document.getElementById('NomFichier').value = tableau[1];
								document.getElementById('CheminSauvegarde').value = tableau[2];
								document.getElementById('NomSauvegarde').value = tableau[3];
								document.getElementById('Importance').options[0].text=tableau[4];
								document.getElementById('evenement_indispo').options[0].text=tableau[5];
								
							
								
							}
					}

	// Ici on va voir comment faire du post
	xhr.open("POST","champs.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	sel = document.getElementById('nom');
	inde = sel.options[sel.selectedIndex].value;
	xhr.send("inde="+inde);
}			

******************************************************************************************

Mes donner sont dans un script "champs.php" qui utilise des requetes sql 

Comme tu vois j'ai mi le xhr.responseText dans un tableau pour remplir des input text mais pour charger des option de liste et pour selectionner d'autres liste je ne voie pas comment faire.

Je pense que la gosse contrainte est que j'envoie toutes le données dans un  xhr.responseText mais là non plus je ne voie pas comment faire autement car tout les champs doivent etre emplie en fonction du premier select (id="nom")

briiiiix · Answer

Si tu as un menu a reconstruire a chaque fois que tu fais un appel a ajax, tu dois forcement cle construire dans le fichier php et retourner son code html dans ton response text.
Je vais t'expliquer ce soir avec un bon exemple.
DSL mais cette apres midi est très chargée
A+

comalias94 · Answer

ok je vas voir ce que je peut faire en attendant
merci quand meme

bg62 · Answer

bonjour
un forum, c'est bien !
ici l'on peut même rester "anonyme", mais par respect pour ceux qui voudraient t'aider en répondant, il serait quand même bien mieux d'y être inscrit,
cela ne coûte rien et c'est bien plus sympathique ...
je sais, je "pique" de nouveau ma crise ... mais il y a parfois  des raisons valables
@mitiés
b g

Actualiser un div avec XMLHttpRequest()

15 réponses

Discussions similaires