XML vers champs de formulaire

Publié le par Marie-Ange MALROUX

Aujourd'hui, nous découvrons quelques prémices d'XML, copiné avec un peu d'ajax. Objectif ? Savoir récupérer des données stockées dans un fichier XML afin de les afficher dans des champs de formulaire. C'est pas cool ça ? Et dans la partie php, quand mes yeux auront dormi après cette journée de dev, nous verrons comment qu'on envoit les données en php vers xml, soit dans la mémoire du nordinateur, soit dans un fichier, on verra, ça dépend si vous êtes sages.

Nous allons stocker nos données dans un fichier xml basique comme ceci :

<?xml version="1.0" encoding="ISO-8859-1"?>
<bibliotheque>
<commentaire>
<idcomm>111</idcomm>
<titre>MonTest</titre>
<comm>Ceci est ma note... </comm>
<type>ns</type>
<pj>pj.jpg</pj>
</commentaire>
</bibliotheque>

Sans trop entrer dans les détails, XML est un langage de balisage tout comme son copain HTML. Les balises ne sont pas figées, il est possible d'en créer tant et plus. L'utilité que nous trouvons ici à l'utilisation du XML est le fait de pouvoir récupérer un certain nombre d'informations. Tant qu'une seule information est traitée, l'interrogation de php suffisait :

Ajax interroge PHP pour connaître une info.
PHP interroge la base de données.
PHP renvoit l'info demandée à Ajax.
Ajax se charge de l'affichage.

Jusqu'ici tout allait bien. Cette solution répondait à mes besoins. Mais aujourd'hui, j'ai besoin de plusieurs données et je dois les afficher dans plusieurs champs, comment faire ? PHP va me stocker les info dans ce fichier xml. Lequel fichier je vais pouvoir interroger avec mon ajax. Impeccable. Voyons voir comme ça marche là-dedans.

function loadXML(){
if (document.implementation && document.implementation.createDocument) {
// déclaration pour Mozilla et FF
docXml = document.implementation.createDocument('', '', null);
}
else if (window.ActiveXObject){
// déclaration pour IE
docXml = new ActiveXObject("Microsoft.XMLDOM");
}
else {
alert('Votre navigateur ne peut pas exécuter ce script.');
}
docXml.load("test.xml");
}
 
 
function champs() {
var titre = docXml.getElementsByTagName('titre');
document.forms["message"].elements["titre"].value = titre[0].firstChild.nodeValue;

}
 
 
window.onload = function() {
loadXML();
lien.onclick = function() { champs(); }
}
 
 

Ce qu'il se passe dans l'ordre : au chargement de la page, loadXML() est exécuté. Ensuite si l'utilisateur clique sur le lien nommé "lien", la fonction champs() sera appelée.

Celle-ci stocke dans sa variable "titre" le contenu du tag "titre" du fichier xml. Ensuite elle valorise le champ "titre" du formulaire message avec la valeur trouvée (compris ? Chais pas comment vous faites pour comprendre avec toutes ces variables "titres" !)

Voici le formulaire html :

<form action="gerer.php" name="message" >
<a href='#' id="lien" name='lien'>Cliquez ici !</a>
 
Nouveau texte : <input type="text" name="titre">
</form>


J'espère que c'est compréhensible, la journée a été longue et mes neurones ne sont plus très à leur place !

Ah oui, erreur de newbie à ne pas commettre (vous allez vous moquer de moi, mais tant pis, je le dis quand même !) :

Faut pas avoir deux fois window.onload dans la page, y'a des scripts, ben ils aiment pas ça du tout (celui-ci par exemple !).

Source : http://users.skynet.be/am034973/2184/xml/importxml.html

Publié dans Ajax - Javascript

Commenter cet article