Php / Ajax Résolu/Fermé

Question

Bonjour, J'ai posté ce sujet dans le forum webmastering mais sans résultat... C'est la première fois que j'utilise Ajax et avec les tutos et cours que j'ai trouvé je n'arrive pas a faire ce que je veux. SUr une page internet j'ai un lien qui permet d'ajouter des lignes.(javascript), dans une ligne, j'ai deux champs et 2 checkbox. Dans le premier champ, l'auteur doit ecrire son nom. Lorsqu'il a renseigné son nom et qu'il clik sur la 2ème checkbox, je voudrais que le deuxième champ se remplisse automatiquement en allant chercher les infos dans la base de données. Etant donné que je ne prévois pas a l'avance combien j'aurais de ligne, je ne sais pas comment faire. Voici qq bouts de code : function create_champ(i) { var i2 = i + 1; document.getElementById('leschamps_'+i).innerHTML = '
'; document.getElementById('leschamps_'+i).innerHTML += 'Auteur extérieur Auteur INAC : '; document.getElementById('leschamps_'+i).innerHTML += (i <= 10) ? 'Ajouter un auteur' : ''; } Code qui remplit ma première ligne : Auteur extérieur Auteur INAC : Ajouter un auteur La fonction GereControle me permet de masquer un champ. Est-ce que qqun peut m'aider pour le code AJAX ou me donner les étapes a suivre...

kij_82 · Answer

Bonjour,

De mémoire il y a un sujet de moins de 3 semaines qui porte sur le même problème que toi, à savoir mettre à jour un champ en allant récupérer la valeur dans une base de données, tout ça en ajax pour que ce soit dynamique.
Par contre je n'ai pas retrouvé le sujet donc il faudrait que tu fasse une recherche avec mot clé.

Sinon, tu peux toujours trouver des tutos sur le net concernant l'Ajax, ou regarde des discussion portant sur le sujet, comme celle-ci :
http://www.commentcamarche.net/forum/affich 5552245 xmlhttprequest et compatibilite navigateurs

Bon courage.

kij_82 · Answer

Les informations envoyées via GET ou POST ne se construisent pas directement dans le nom du fichier à appeler.
Il faut que tu mettes ça dans le fameux 'data' qui est utilisé lors de l'envoi des paramètres via cette instruction :
xhr.send(data); 

De plus, l'instruction : xhr.send(data); est celle qui permet de "lancer" l'appel à ton script PHP, donc si tu commente cette partie là c'est normal que rien ne se passe

kij_82 · Answer

Plusieur chose ne vont toujours pas dans ton script. Par exemple cette ligne : xhr.open ("GET", "filename", false); Le deuxième paramètre est sensé être le chemin d'acces au fichier PHP a exécuter. Hors dans ton cas qu'est ce que tu passe ? La chaine de caractère "filename", et non pas la valeur de la variable filename. Si tu as firefox, tu peux aller dans Outils->console d'erreur et tu verra certainement un point d'exclamation rouge te disant que le script 'filename' n'a pas été trouvé. Bref, en gras, voici la syntaxe qu'il te faut pour ton script (a compléter par tes soins) : Voilà, je n'ai pas vérifié mais ça devrait fonctionner. Le but est que tu ai une popup qui s'afficher avec le message "tout est ok". Une fois que ce sera bon, tu pourra passer à la suite, à savoir afficher du code javascript dans le script PHP appelé, de manière à ce qu'il soit exécuté par l'objet XHR.

kij_82 · Answer

Bonjour, ta syntaxe est correcte cependant je ne vois pas à quoi te sert le ? Tu le mets en dehors de ton champ input, en référencant avec l'identifiant 'auth_i' (i vaut la valeur entière ça aucun problème normalement) Puisque tu as nommé ton champ input de la même manière que ton span, j'imagine que tu veux récupérer ce qu'il y a dans le champ input non ? Dans ce cas c'est sur le champ input qu'il faut mettre l'attribut id='...' et supprimer les balises span. Enfin, personnellement je n'utilise jamais ces balises donc je ne sais pas vraiment à quoi elle servent, mais si tu en as vraiment besoin peux-tu m'expliquer à quoi elles servent, ou du moins ce que tu veux en faire ? Si tu transforme ainsi : document.getElementById('leschamps_'+i).innerHTML = '
'; Tu devrais pouvoir récupérer ta valeur via un : document.getElementById('auth_1'); document.getElementById('auth_2');

kij_82 · Answer

Re,

Je ne connais pas dream, mais le fait qu'il ne colore pas la syntaxe ne veut pas dire que le script ne fonctionne pas.
open est un nom de commande relativement connu et exploité dans les différents langages, ce qui n'est pas le cas pour le mot clé 'onreadystatechange'.

Pour ma part, voici la fonction que j'utilise à chaque fois lorsque je veux faire appeler un script :

function callScript ( scriptName, args ){
	
	var xhr_object = null; 
	     
	if(window.XMLHttpRequest) // Firefox 
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
     return; 
	} 
	 
	xhr_object.open("POST", scriptName, true);
	     
	xhr_object.onreadystatechange = function() { 
	   if(xhr_object.readyState == 4) {
			//alert(xhr_object.responseText); // DEBUG MODE
			//document.write(xhr_object.responseText);
			eval(xhr_object.responseText);
		 }
		
		//alert(xhr_object.readyState);
		return xhr_object.readyState;
	} 
	 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	xhr_object.send(args);

}


Où args est la chaine de caractère représentant les paramètres que je passe au script appellé.
C'est le même code que toi donc le tien devrait fonctionner aussi.

Il faut donc plutôt chercher ailleurs : du coté de ton script.
Les questions à se poser sont les suivantes :
 - est ce que mon script est correctement appelé ? (chemin d'accès ok)
 - est ce qu'il est exécuté ? Pour cela il suffit de mettre une instruction de ce type dans ton script php (sans rien d'autre c'est juste pour tester) :
  
  echo "coucou";
  
  Et de commenter la ligne 
  eval(xhr_object.responseText); 
  de mon code, puis décommenter la ligne 
   //alert(xhr_object.responseText); // DEBUG MODE

Pour information, la commande 'eval' permet d'évaleur une chaine de caractère comme du code.
Dans mes scripts PHp j'ai pour habitude d'écrire sur la sortie du code javascript, qui est donc interprété via cette commande 'eval', ce qui permet de mettre à jour les éléments de ma page courante.

Reprenons, effectue ces deux petites choses pour savoir si le script est bien trouvé et exécuté.
Un autre moyen de le savoir est d'exécuter ta page sous firefox en vérifiant si une alerte d'erreur apparait dans la console d'erreur de FF (accessible via Outils-> console d'erreur, onglet erreurs)

kij_82 · Answer

Non ton code n'est pas bon, je n'avais pas fais attention mais regarde / compare plus attentivement avec celui que je t'ai donné plus haut.

Tu t'apercevra que ton instruction send data est compris dans ton onreadystatechange.

Onreadystatechange = new function.... te permets de définir QUOI faire lorsque le status de l'objet XHR change au cours du temps. Le status peut être parmi les suivants : instanciate, initialized, ..., finished. (grossomodo, ce n'est pas les termes exacts mais je n'ai pas la doc sous les yeux)

Hors, puisque ton instruction send data, qui elle va réellement exécuter ton objet XHR, est à l'intérieur de ta fonction, tu vois que ça ne peut pas aller (?)

Il faut donc que :
  - tu sortes ces deux instructions de ta fonction onreadystatechange :

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send (data); 


 - Tu peux à mon avis supprimer la partie suivante dans ton test :
&& xhr.status == 200 

Avec tout ça tu devrais enfin voir quelque chose fonctionner, du moins je l'espère pour toi :)


PS: par ailleurs j'aimerais bien voir le code de ta fonction afficher si c'est possible

kij_82 · Answer

Merci, autant pour moi je n'avais pas vu que tu m'avais déjà donné le corps de ta fonction afficher un peu plus haut ^^ Voici un bout de code qui devrait fonctionner : Tu remplace ton code javascript du haut par ces fonctions, il ne te reste plus qu'à appeler la fonction 'updateFieldValue' là où tu souhaite de la manière suivante : Par contre, une autre chose dont je n'avais pas fait attention, et il est probable que ton script ne fonctionne pas en partie pour ça, c'est que d'un coté tu récupère la valeur du champ 'auth_2' comme si ce dernier est une champ de type input text : var nom = document.getElementById('auth_2').value; Et d'un autre coté, dans ta fonction afficher, tu essayes de remplir sa valeur comme s'il s'agissait un conteneur tel qu'une

: document.getElementById('auth_2').innerHTML = txtdocument; Attention ! Pour un champ input text, l'instruction 'innerHTML' ne fonctionne pas. Un warning jaune devrait apparaître d'ailleurs à l'exécution de ton script dans la console d'erreur de firefox. Mais comme tu as une autre erreur avant cette instruction tu ne l'as verra pas ;) Je l'ai laissé tel quel dans le code ci-dessus au cas où j'ai mal compris, mais si ton champ 'ath_2' est bien de type 'input text' il faudra changer 'innerHTML' par 'value' dans la fonction afficher. Si tu as des problèmes pour mettre le code donné dans ta page, donne moi tout le code de ta page et je te redonnerai fonctionnel.

kij_82 · Answer

Salut,

Cela dépend : est ce que c'est le même évênement qui doit déclencher le remplissage des deux inputs ? Si oui alors tu peux effectivement faire ça dans le même fichier PHP à condition de changer quelques petits trucs pour faciliter le travail :

- remettre comme je fais habituellement dans la fonction javascript 'callScript', à savoir commenter l'appel à ta fonction afficher, et décommenter cette ligne :
//eval(xhr_object.responseText);

- modifier quelque peu ton code dans le script PHP de manière à écrire directement le code javascript chargé de raffraichir dans les 'echo'.

Ce n'est pas simple à expliquer clairement mais disons que si tu veux raffraichir un élément directement depuis ton fichier PHP (après avoir bien modifié le javascript comme dis ci-dessus), il suffit de mettre le code javascript directemetn dans ton echo php.

Par exemple au lieu de faire appel à ta fonction afficher dans l'objet XHR, tu écrira directement dans le PHP de la façon suivante :

echo "var input1 = document.getElementById('auth_2');";
echo 'input1.value = ".$value2.";";   // --- $value2 est la valeur récupérée par ta requête SQL 1
echo "var input2 = document.getElementById('auth_3');";
echo 'input1.value = ".$value3.";";   // --- $value3 est la valeur récupérée par ta requête SQL 2


Voilà un exemple, ce code javascript qui est renvoyé sur la sortie standard de ton script PHP, est récupée dans la fonction callScript et directement interprétée via l'instruction 'eval' :
eval(xhr_object.responseText);

Si tu as du mal donne moi le code entier de ton fichier PHP et je le modifierai pour te montrer la syntaxe exact.


PS : dans le cas où ce n'est pas le même évènement qui déclenche le remplissage du deuxième input, il faudra bien sur créer un deuxième script PHP qui fera le traitement approprié pour remplir ce deuxième input, et l'appeler via la fonction callScript en lui passant le chemin vers ce nouveau script php, ainsi que ses paramètres.

PS bis : dans tous les cas il est préférable de faire comme je dis dans ce post : écrire directement le code javascript interprétable dans ton script PHP. Cela te donne plus de souplesse pour effectuer les changements que tu souhaite voir opérer dans ta page.

kij_82 · Answer

Re, désolé j'étais en longue réunion :s Donc, si j'ai bien suivi... ton nom est Dupont ! :D C'est pas courant dis donc :D Plus sérieusement, il faut : 1) que tu commente / décommente la partie de code comme ci-dessous dans la fonction javascript 'callScript' : eval(xhr_object.responseText); //afficher (xhr_object.responseText); 2) Dans ton script PHP, effectues les modifications suivantes (en gras) : _ldap->KiTesToi2()) //si on a trouvé l'uid { //début crochet 3 $uid=$news->_ldap->KiTesToi2(); } $auth_2= $ldap->KiTesToi2(); // $auth contient le id trouvé dans l'annuaire sous forme pnom $requete ="SELECT * FROM CONSULT_LOGO WHERE nom='$auth_2'"; //echo $requete; // pour le debug $result = mysql_query($requete,$w10) or die(mysql_error()); $row= mysql_fetch_assoc($result); $affichage = ""; if (empty($auth_2)) // { $affichage = "

Vous n'avez pas saisi votre nom ?! Retournez à la page précédente et indiquez votre nom...
ou le choix est multiple... cochez le bouton qui convient et cliquez sur Entrer."; } else { //début crochet 4 $requete ="SELECT * FROM CONSULT_LOGO WHERE nom='$auth_2'"; //echo $requete; // pour le debug $result = mysql_query($requete,$w10) or die(mysql_error()); $row= mysql_fetch_assoc($result); $infoauth=$ldap->searchFromUid($auth_2); $news->_ldap->KiTesToi2(); $affichage =$infoauth[0][cn][0]; } // --- Javascript code to update interface echo "document.getElementById('auth_2').innerHTML = '".$affichage ."';"; //echo "document.getElementById('auth_2').value = '".$affichage ."';"; // en fonction du type de champ ?> Voilà, normalement ça devrait faire la même chose qu'auparavant. Pour ce qui est par contre de l'action déclenchée par la checkbox, il me faut impérativement le code PHP de cette partie de ton formulaire pour pouvoir t'aider (afin de connaitre les identifiants des champs, etc.)

kij_82 · Answer

Salut,

Pour ce qui est de ton code il y a bien des erreurs de syntaxe (en gras) :

echo "var input1 = document.getElementById ('auth_2');";
echo "'input1.value = ".$nomprenom.";";


Et il manque des guillemets simples autour de la valeur de $nomprenom. Voilà ce que tu devrais avoir :

echo "var input1 = document.getElementById ('auth_2');";
echo "input1.value = '".$nomprenom."';";


Pour ce qui est du reste on verra ça à ton retour.
Bonnes vacances ^^

kij_82 · Answer

Salut :)

Et bien oui, pour cela il te suffit juste de mettre un paramètre à la fonction javascript 'updateFieldValue()', que ce paramètre soit pris en compte dans la fonction et passées au script PHP lorsqu'il est appelé, puis modifier ton script PHP pour qu'il récupère ce paramètre, et mette à jour non plus la div 'auth_2' mais 'auth_'.$param


Je pense que tu es en mesure de faire les modifications toi même, si tu as soucis je reste à ta disposition.

Php / Ajax

11 réponses

Discussions similaires