Actualiser un div avec XMLHttpRequest()
comalias94
-
jordan -
jordan -
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
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
A voir également:
- Actualiser un div avec XMLHttpRequest()
- Div c++ - Télécharger - Langages
- Remplacer #div/0 par vide - Forum Excel
- Grindr impossible d'actualiser ✓ - Forum Instagram
- Enlever les #DIV/0! dans une colonne calcul d'un tableau croisé ✓ - Forum Excel
- Actualiser liste déroulante excel - Guide
15 réponses
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);
}
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);
}
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")
******************************************************************************************
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")
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
document.getElementById('id_element').value = 'valeur';
J'espère que ça te convien, sinon je suis la
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
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
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à
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à
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
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
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 ?
Tu vaux remplire des chams et selectionner des valeurs dans des menus ou recharger de nouveau des menus ?
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
- remplir des champs texte
- selectionner des valeurs dans des menu
- charger des option dans d'autres menu
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+
Je vais t'expliquer ce soir avec un bon exemple.
DSL mais cette apres midi est très chargée
A+
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
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
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 ?
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 ?
