Bonjour,
J'ai un soucis avec les listes deroulantes, je sais que c'est un peu bete mais je ne m'y connais pas du tout en ajax, j'ai fais quelques recherches et je suis arrivé à afficher les données sur un seul champs texte alors que je veux le faire sur 5.
Voici mon code :
Pour la page html :
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
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;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// 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;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('desc').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajax.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
// ici, l'id de l'auteur
sel = document.getElementById('page');
id_page = sel.options[sel.selectedIndex].value;
xhr.send("id_page="+id_page);
}
</script>
</head>
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Pages</label>
<select name='page' id='page' onchange='go()'>
<option value='-1'>Aucun</option>
<?
include "dataconn.php";
$rep2 = mysql_query("SELECT * FROM pages ORDER BY nom_page ASC");
while($row = mysql_fetch_assoc($rep2)){
echo "<option value='".$row["id_page"]."'>".$row["nom_page"]."</option>";
}
?>
</select>
<label>desc</label>
<div id='desc' style='display:inline'>
<input type="text" name='desc' value="">
</div>
</fieldset>
</form>
</body>
</html>
et ici le code du script ajax.php :
<?php
echo "<input type='text' name='desc' value='";
if(isset($_POST["id_page"])){
include "dataconn.php";
$res = mysql_query("SELECT * FROM pages
WHERE id_page=".$_POST['id_page']."");
while($row = mysql_fetch_array($res)){
echo $row["desc"];
}
}
echo "'>";
?>
comme je l'ai expliqué je voudrais récupérer plusieurs champs texte qui correspondent au enregistrement sur la meme table pour pouvoir les modifier et les reenregistrer.
Je vous remercie d'avance pour votre aide.
A voir également:
Ajax liste déroulante dynamique
Jquery liste déroulante dynamique - Meilleures réponses
Déjà :
Pas besoin de passer par du js pour récupérer la value de l'élément sélectionné dans ton select... Il suffit de le passer en paramètre de ta fonction.
Ensuite... tu ne créés pas dans ton fichier php (ajax) l'input qui va recevoir la valeur....
Tu l'écris depuis ton code javascript...
=> pour un input on utiliser le Value ( et non le innerHTML)
Merci Jordane pour votre reponse,
ma question est la suivante :
j ai d autres champs dans la table pages champs2, champs3
ce que je voudrais et que comme j ai fais pour desc je voudrais faire pour champs2 et champs3
// Ne pas oublier d'importer jquery.js dans la page
function go(id_page){
$.ajax({
url : 'ajax.php',
data : "id_page="+id_page,
type : 'post',
dataType : 'json',
success : function(data){
// ICI LE CODE POUR REMPLIR TES INPUT
$('#input_desc').val(data.desc);
},
error : function(resultat){
alert(resultat);
}
});
}
oh my god tout ça est trop pour moi lol deja je suis nul en ajax et maintenant y a json en plus, je déconne lol
j'essaye ça et je vais voir ce que ça va donner
Merci
Et pour l'AJAX .. plus besoin de créer le getXhr ... c'est Jquery qui gère tout seul.
Pour ce qui est du json... ce n'est rien de plus qu'un "encodage" ...
comme tu peux le voir.. ça ne complexifie pas ton code.. puisque je n'ai ajouté qu'une instruction pour le faire .... json_encode
Vous n’avez pas trouvé la réponse que vous recherchez ?
Ensuite... il est où le json_encode du fichier ajax (php) ??
ça veut dire que que je dois mettre les autres input c est ça?
Oui.. mais attention tu as une apostrophe en trop
Et ..
data.champs2
- data représente les données issues de ta page ajax (ça..tu ne change rien)
- champ2 .. ça doit être le nom d'un champ de ta BDD retourné par ta requête;
si je prend la requête :
j'ai lu quelques cours et tutos de json mais honetement je suis encore au point de depart je ne sais pas comment l utiliser (et quel est l'interet de son utilisation)
si c est juste de l encodage donc meme si je ne l utilise pas ça devrait fonctionner n est ce pas?
mais maintenant quand je fais mon choix dans la liste deroulante j'ai un pop up avec [Object object] et rien ne s'affiche sur les champs texte :(
Ca c'est normal.... un ALERT ne peut pas afficher directement le contenu d'une variable JSON.... c'est un peu comme en PHP ... faire un echo sur un Array...ça ne passe pas!
Pour voir ce que ta variable contient utilise le console.log()
si c est juste de l encodage donc meme si je ne l utilise pas ça devrait fonctionner n est ce pas?
Ca te permet de pouvoir plus facilement manipuler les données issues de ta page php (ajax).....
désolé ça fait 3 jours que je tourne en rond et que je fais des recherches et que lis les tutos sans résultat, je perds la tete que j ai oublié de mettre le code.
j'ai ajouté les autres champs texte et j'ai eu encore le pop up
merci je l'ai remplacé par go(this.value) mais ça ne rempli que les 2 premiers champs et par la valeur du 1er (le contenu du 1er champs est dupliqué au 2eme et le 3eme champs est vide)
je sens que je suis tout pres de la solution lol
maintenant j'ai le code de sortie que je dois avoir pour les 3 input mais sur chaque champs texte (je ne sais pas si je suis assez clair ou non, j'ai des champs texte et dedans <input...> les 3 input que je dois avoir correctement remplis)