xml, javascript et fckeditor
Partons du début de l'aventure de notre remplissage de formulaire :
Nous disposons d'un fichier xml comme ceci :
Et un formulaire html qui sert déjà pour l'ajout des commentaires comme ceci :
</script>
Et voici comment se présente chargeXML(num) :
Nous disposons d'un fichier xml comme ceci :
<?xml version='1.0' encoding='ISO-8859-1'?>
<bibliotheque>
<commentaire>
<idcomm>1</idcomm>
<titre>dispatching</titre>
<comm>Ceci est une note pour l'ensemble du personnel.<br/>^M
<br/></comm>
<type>ns</type>
<pj></pj>
</commentaire>
<commentaire>
<idcomm>2</idcomm>
<titre>documentation</titre>
<comm>La nouvelle version d'Autocad est sortie.<br/>^M
<br/>^M
Vous trouverez ci-joint la mise à jour de la documentation.<br/></comm>
<type>doc</type>
<pj>2autocad.pdf</pj>
</commentaire>
</bibliotheque>
Et un formulaire html qui sert déjà pour l'ajout des commentaires comme ceci :
<form name="Messages" action="gerer.php" method="POST" enctype="multipart/form-data">
<h3>Ajouter un message :</h3>
Date :<br/>
<input type="text" name="dateJour" value="<? echo $mjour.'/'.$mois.'/'.$annee; ?>" /><br/>
Heure : <br/>
<input type="text" name="heureJour" value="<? echo $heure.'h'.$minutes; ?>" /><br/>
Type : <br />
<select name="type">
<option>
<option value="ns">Note de service
<option value="doc">Documentation
</select>
<br />
Titre : <br />
<input type="text" name="titre"> <br />
Date :<br/>
<input type="text" name="dateJour" value="<? echo $mjour.'/'.$mois.'/'.$annee; ?>" /><br/>
Heure : <br/>
<input type="text" name="heureJour" value="<? echo $heure.'h'.$minutes; ?>" /><br/>
Type : <br />
<select name="type">
<option>
<option value="ns">Note de service
<option value="doc">Documentation
</select>
<br />
Titre : <br />
<input type="text" name="titre"> <br />
Commentaires : <br/>
<textarea name="commentaire" cols="70" rows="10" id="commentaire">
</textarea><br/><br/>
<input type="submit" name="btmess" value="Valider" />
</form><textarea name="commentaire" cols="70" rows="10" id="commentaire">
</textarea><br/><br/>
<input type="submit" name="btmess" value="Valider" />
Et maintenant, on liste tous les commentaires. On voudrait que lorsqu'on clique sur l'un d'eux, les données qui lui correspondent dans le fichier xml soient extraites par du javascript et qu'elles remplissent les champs du formulaire ci-dessus. On en veut trop ? Mais noooon !
Dans la partie <head></head>, il faut charger le fckeditor et une fonction que nous allons créer pour charger le fichier xml :
Dans la partie <head></head>, il faut charger le fckeditor et une fonction que nous allons créer pour charger le fichier xml :
<script type="text/javascript">
window.onload = function() {
// chargement de la zone de saisie de commentaire
var oFCKeditor = new FCKeditor( 'commentaire' ) ;
oFCKeditor.BasePath = "/serie/libs/FCKeditor/" ;
oFCKeditor.Height = window.innerHeight - 80 ;
oFCKeditor.Config['CustomConfigurationsPath'] = '../../../fck_config.js';
oFCKeditor.ToolbarSet = 'outils';
oFCKeditor.ReplaceTextarea() ;
//charger valeurs d'1 comment. dans les zones de saisies pour modif après clic sur titre comment. existant
//chargement de la fonction loadXML à voir plus loin
loadXML();
}
//fonction de chargement du fichier xml au sein d'une variable
function loadXML() {
// Routine de vérification si le navigateur gère la méthode utiliséewindow.onload = function() {
// chargement de la zone de saisie de commentaire
var oFCKeditor = new FCKeditor( 'commentaire' ) ;
oFCKeditor.BasePath = "/serie/libs/FCKeditor/" ;
oFCKeditor.Height = window.innerHeight - 80 ;
oFCKeditor.Config['CustomConfigurationsPath'] = '../../../fck_config.js';
oFCKeditor.ToolbarSet = 'outils';
oFCKeditor.ReplaceTextarea() ;
//charger valeurs d'1 comment. dans les zones de saisies pour modif après clic sur titre comment. existant
//chargement de la fonction loadXML à voir plus loin
loadXML();
}
//fonction de chargement du fichier xml au sein d'une variable
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 saurait pas exécuter ce script.');
}
docXml.load("notes.xml");
}// 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 saurait pas exécuter ce script.');
}
docXml.load("notes.xml");
</script>
Eh oui, il faut tout ça pour y parvenir. Si je dois détailler davantage, ne pas hésiter à me le dire. Ne pas non plus hésiter à me corriger si besoin !
Dans le <a href="#"> ajouter onclick="chargeXML()". Personnellement, vu que j'ai incrémenté ma liste, je fais passer le numéro du commentaire en paramètre dans chargeXML(num).
Dans le <a href="#"> ajouter onclick="chargeXML()". Personnellement, vu que j'ai incrémenté ma liste, je fais passer le numéro du commentaire en paramètre dans chargeXML(num).
Et voici comment se présente chargeXML(num) :
<script type="text/javascript">
// fonction de traitement des données chargées
function chargeXML(num) {
// on crée des variables de type Array, qui recoivent comme valeur les balises choisies dans le document xml
var titre = docXml.getElementsByTagName('titre');
var commentaire = docXml.getElementsByTagName('comm');
var type = docXml.getElementsByTagName('type');
// On récupère les valeurs textuelles contenues dans la balise choisie, et on l'applique au formulaire.
// En xml, la valeur d'une balise est le nodeValue de son premier enfant (firstChild)
document.forms["Messages"].elements["titre"].value = titre[num].firstChild.nodeValue;
document.forms["Messages"].elements["type"].value = type[num].firstChild.nodeValue;
var oFCKeditor = FCKeditorAPI.GetInstance('commentaire');
oFCKeditor.EditorDocument.body.innerHTML = commentaire[num].firstChild.nodeValue;
}
</script>
// fonction de traitement des données chargées
function chargeXML(num) {
// on crée des variables de type Array, qui recoivent comme valeur les balises choisies dans le document xml
var titre = docXml.getElementsByTagName('titre');
var commentaire = docXml.getElementsByTagName('comm');
var type = docXml.getElementsByTagName('type');
// On récupère les valeurs textuelles contenues dans la balise choisie, et on l'applique au formulaire.
// En xml, la valeur d'une balise est le nodeValue de son premier enfant (firstChild)
document.forms["Messages"].elements["titre"].value = titre[num].firstChild.nodeValue;
document.forms["Messages"].elements["type"].value = type[num].firstChild.nodeValue;
var oFCKeditor = FCKeditorAPI.GetInstance('commentaire');
oFCKeditor.EditorDocument.body.innerHTML = commentaire[num].firstChild.nodeValue;
}
</script>
La difficulté majeure a été de récupérer la valeur dans une variable et de la passer dans fckeditor. C'est ce que font les lignes en bleu.
Merci encore à la personne qui a laissé l'exemple xml sur son site : http://users.skynet.be/am034973/2184/xml/importxml.html car la démonstration par l'exemple est vraiment excellente. J'espère qu'il restera en ligne très longtemps !
Merci également à ceux qui ont la gentillesse de bien vouloir répondre à des questions sur les forums sans systématiquement écrire "t'as qu'à regarder sur le forum de l'éditeur". Je comprends qu'il soit inconcevable de ne pas se documenter avant de poser une question. Mais quand on est débutant et qu'il faut s'attaquer à de la doc en anglais, ce n'est pas chose facile. D'ailleurs, je poste souvent la réponse à ma question, développée le mieux possible, me disant que ça servira peut-être à qqn qui a aussi mal googlé que moi ! ^^
Merci encore à la personne qui a laissé l'exemple xml sur son site : http://users.skynet.be/am034973/2184/xml/importxml.html car la démonstration par l'exemple est vraiment excellente. J'espère qu'il restera en ligne très longtemps !
Merci également à ceux qui ont la gentillesse de bien vouloir répondre à des questions sur les forums sans systématiquement écrire "t'as qu'à regarder sur le forum de l'éditeur". Je comprends qu'il soit inconcevable de ne pas se documenter avant de poser une question. Mais quand on est débutant et qu'il faut s'attaquer à de la doc en anglais, ce n'est pas chose facile. D'ailleurs, je poste souvent la réponse à ma question, développée le mieux possible, me disant que ça servira peut-être à qqn qui a aussi mal googlé que moi ! ^^