Ajouter du contenu dans div

Résolu/Fermé
info_Louka Messages postés 64 Date d'inscription mardi 25 janvier 2011 Statut Membre Dernière intervention 16 mars 2013 - 24 mai 2011 à 15:51
info_Louka Messages postés 64 Date d'inscription mardi 25 janvier 2011 Statut Membre Dernière intervention 16 mars 2013 - 1 juil. 2011 à 14:52
Bonjour,

je voudrais ajouter un champ text dans un emplacement en cliquant sur un bouton sans recharger la page
j'ai fais ceci

listes_liees.php

<html>
<head>
<!-- Script de listes deroulantes liees avec appel par AJAX, (evite le rechargement de la page) -->
<script language="Javascript"type="text/JavaScript">
// Requette AJAX
function makeRequest(url,id_niveau,id_ecrire){
var http_request = false;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Abandon :( Impossible de créer une instance XMLHTTP');
return false;
}
http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
// lancement de la requete
http_request.open('POST', url, true);
//changer le type MIME de la requête pour envoyer des données avec la méthode POST , !!!! cette ligne doit etre absolument apres http_request.open('POST'....
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj=document.getElementById(id_niveau);
data="val_sel="+obj.value;
http_request.send(data);
}

function traitementReponse(http_request,id_ecrire) {
var affich="";
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// cas avec reponse de PHP en mode texte:
//chargement des elements reçus dans la liste
var affich_list=http_request.responseText;
obj = document.getElementById(id_ecrire);
obj.innerHTML = affich_list;
}
else {
alert('Un problème est survenu avec la requête.');
}
}
}
</script>
</head>

<body>
<form name="test1" method="post" action="listes_liees.php" >
<div id="id_list1">

<input type='submit' value='ajouter' id="id_niv1" onClick="makeRequest('rep_PhpAjax.php','id_niv1','id_niv2')">
<input type='text' name='j2'>
<?php
$i=1;
?>

<br><br>
</div>


<div id="id_niv2">
<!-- ici sera charge la reponse mode texte de PHP à la request AJAX -->
</div>
</form>
</body>
</html>


et dans repphpajax

repphpajax1.php

<?php
$aff="<input type='text' name='j'>";
// envoi reponse Php a Ajax
echo $aff;
?>

seulement ca m'affiche toujours "Un problème est survenu avec la requête."

merci de m'aider


4 réponses

Pourquoi passer par de l'ajax alors que le js fait tout, tout seul ??
0
kshaad Messages postés 13 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 30 juin 2011
30 juin 2011 à 11:05
j'ai aussi un problème de ce genre, en fait moi j'ai pu remplir un champ text dans mon formulaire selon le choix sur une liste déroulante en faisant appel à Ajax, le problème maintenant c'est que je veux remplir plusieurs champs en même temps par une seule fonction que j'appel sur le onChange de ma liste.
voila ma fonction pour remplir un seul champ:

function goIDligne(){
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 remplir le champ
document.getElementById('VarIdligne').innerHTML = leselect;

}
}

// Ici on va voir comment faire du post
xhr.open("POST","form/AjaxIdligne.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('ligneprod');
idligne = sel.options[sel.selectedIndex].value;
xhr.send("idLigne="+idligne);


}

et mon fichier AjaxIdligne.php


<?php
echo"<div id='VarIdligne'>";
echo "<input name='VarIdligne' id='VarIdligne' type='text' value= ".$_POST["idLigne"]." >";
echo"</div>";
$res=$_POST["idLigne"];
//echo $res;


?>

et sur mon formulaire le champ est:

<input name="VarIdligne" id='VarIdligne' type="text" >

Je sais que j'aurais pu faire ça juste en javascript son faire appel à ajax, mais lorsque je dois remplir un deuxième champs sur mon formulaire j'aurais besoin de faire une requette sql sur ma base.
Donc ma question précise c'est comment adapter cette fonction pour remplir 2 champs sur mon formulaire en même temps.
Merci de votre réponse....
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
30 juin 2011 à 11:09
Je ne comprends pas pourquoi tu ne charges pas ton champ de texte avec tout le reste, mais avec la propriété "display: none;" dont tu te débarrasses sur le clic du bouton, comme ça: plus d'ajax donc plus de problème
0
kshaad Messages postés 13 Date d'inscription mardi 27 juillet 2010 Statut Membre Dernière intervention 30 juin 2011
30 juin 2011 à 13:24
J'ai peur de ne pas bien comprendre ta solution!!!!

Mais, en fait je fais tout ca, pour pouvoir recuperer l'ID d'un element selectionné sur ma liste déroulante sur le meme formulaire, et aussi un autre champ de ma BDD qui dépend de cet ID. et tt cela sur le meme formulaire sans redirection vers une autre page.

j'ai pensé à stocker l'ID dans une variable pour ensuite l'utiliser dans une requette sql en php sur le meme formulaire, et exploiter le resultat pour le mettre dans mon ipunt (type text), mais j'arrive pas à le faire.

si vous avez des idées je suis preneur...
Merci d'avance
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
30 juin 2011 à 13:35
Désolé, j'ai oublié de préciser que je répondais à info_Louka... Il veut faire une requête Ajax pour son champ text alors qu'il peut le cacher puis le montrer au clic du bouton...
0
Popoï_ Messages postés 171 Date d'inscription mardi 21 juin 2011 Statut Membre Dernière intervention 8 mars 2019 75
30 juin 2011 à 13:41
conseil: pour une aide plus efficace, crée ton propre topic
J'y réfléchirai quand j'aurai le temps.
0
info_Louka Messages postés 64 Date d'inscription mardi 25 janvier 2011 Statut Membre Dernière intervention 16 mars 2013
1 juil. 2011 à 14:52
merci bien Popoï je me suis arrangé avec une autre solution
0