Rechercher : dans
Par :

Actualiser un div avec XMLHttpRequest()

Dernière réponse le 29 oct 2008 à 17:06:28 comalias94, le 28 oct 2008 à 09:36:05 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Internet Explorer 6.0

Meilleures réponses pour « actualiser un div avec XMLHttpRequest() » dans :
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
Utilisation de l'objet XMLHttpRequest VoirUtilisation de l'objet XMLHttpRequest I - Introduction 1.1 - Quelques mots 1.2 - Techniques pré-requises II - Présentation 2.1 - Principe 2.2 - Utilisation asynchrone 2.3 - Avantages 2.4 - Inconvénients III - Architecture IV - Mise...

1

briiiiix, le 28 oct 2008 à 09:48:55

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

Répondre à briiiiix

2

comalias94, le 28 oct 2008 à 10:06:36

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

Répondre à comalias94

3

briiiiix, le 28 oct 2008 à 11:15:17
  • +1

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);
}

Répondre à briiiiix

4

comalias94, le 28 oct 2008 à 11:59:04

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 ?

Répondre à comalias94

5

briiiiix, le 28 oct 2008 à 12:05:28
  • +1

Tu veux modifier la liste des choix ?

Répondre à briiiiix

6

comalias94, le 28 oct 2008 à 12:53:01

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

Répondre à comalias94

7

briiiiix, le 28 oct 2008 à 13:04:41

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à

Répondre à briiiiix

8

comalias94, le 28 oct 2008 à 14:11:04

Là j'avoue j'ai un peu de mal à te suivre

voilà mom formulaire :

************************************************************­*******************************
<form action="" method="post" >
<p align="right">
<input type="submit" name="save_importation" value="save">
<input type="submit" name="exit_importation" value="exit">
<input type="submit" name="help_importation" value="help">
</p>

<fieldset>
<legend> <strong> <em class="vert"> Inputs nécéssaires à la production </em> </strong>
<br />

<p align="right" > <em class="new">NEW INPUT </em>:
<textarea name="NouveauInput" rows="1" cols="25"></textarea>
<input type="submit" name="ajouter_input" value="ajouter">
</p>
<em ><strong class="sujet"> Nom : </strong></em >

<select name="nom" id='nom' onchange='go()'>

<option value='-1'> choisir un input </option>
<?php
$bdd = "importation"; //Base de données importation
$host= "localhost"; // Hote
$user= "root"; // Utilisateur
$pass= ""; // Mot de passe

//Connexion bdd
@mysql_connect($host,$user,$pass)
@mysql_select_db($bdd);

$result= MYSQL_QUERY("SELECT * FROM table_inputs_importation");
while($donnees = mysql_fetch_array($result))
{
echo '<option value="'.$donnees['NomInput'].'">'.$donnees['NomInput'].'</option>';
}

mysql_close(); // Déconnexion
?>

</select>

<input type="submit" name="afficher" value="ok">
<input type="submit" name="suprimer_input" value="suprimer">

---------------------------------------------------------------------------------------------------------------------------------------------------------------
<br />

<em > Chemin importation :</em >
<div >
<input type="text" id="CheminImportation" name="CheminImportation" size="100" maxlength="300" />
</div><br /> <br />

<em > Non du fichier : </em >
<div >
<input type="text" id="NomFichier" name="NomFichier" size="100" maxlength="200" />
</div><br /> <br />

<em > Chemin de sauvegarde : </em >
<div >
<input type="text" id="CheminSauvegarde" name="CheminSauvegarde" size="100" maxlength="200" />
</div><br /> <br />

<em > Non sauvegarde : </em >
<div >
<input type="text" id="NomSauvegarde" name="NomSauvegarde" size="100" maxlength="200" />
</div><br /> <br />

<em > Entrée nécessaire pour le traitement ? </em >

<br /> <br />
<select id="Importance" name="Importance">
<option value="o"> oui </option>
<option value="n"> non </option>
</select>
<br /> <br />
<em > type d'input : </em >

<select id="evenement_indispo" name="evenement_indispo">

<option value="o"> indisponibilité </option>
<option value="n"> événement </option>
</select>

<br /> <br />
---------------------------------------------------------------------------------------------------------------------------------------------------------------
</legend>

</form>
*******************************************************************************************


Comme tu peut le voir je déclanche une fonction ajax go() dans mon premier <select> (id="nom") ensuite le reste des éléments du formulaire doivent etre remplit (ou séléctionné) dynamiquement en fonction du choix sélectionné.

dans ma fonction go() qui retourne le xhr.responseText mais je vois pas comment remplir (ou selectionner ) automaiquement mes champs avec ta dernière explication

Merci

Répondre à comalias94

9

briiiiix, le 28 oct 2008 à 14:23:56

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 ?

Répondre à briiiiix

10

comalias94, le 28 oct 2008 à 14:32:32

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

Répondre à comalias94

11

briiiiix, le 28 oct 2008 à 14:41:57

D'acc, fais voir ton code js, stp

Répondre à briiiiix

12

comalias94, le 28 oct 2008 à 14:57:18

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")

Répondre à comalias94

13

briiiiix, le 28 oct 2008 à 15:34:36

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+

Répondre à briiiiix

14

comalias94, le 28 oct 2008 à 16:09:04

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

Répondre à comalias94

15

bg62, le 29 oct 2008 à 11:23:31

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
le 'www' est fait aussi pour communiquer, partager et échanger, non ?

Répondre à bg62

16

 jordan, le 29 oct 2008 à 17:06:28

Salut

Répondre à jordan