11548 sujets

JavaScript, DOM et API Web HTML5

Pages :
Salut tout le monde, j'ai tenté un petit truc d'utilisation de fichier XML via JavaScript avec le script de Lisaraël :
http://forum.alsacreations.com/topic.php?fid=5&tid=2984#p28895
http://users.skynet.be/am034973/2184/xml/importxml.html

Mais ça merdouille je sais pas trop pourquoi Smiley ohwell
J'ai un fichier XML de ce type :


<?xml version="1.0" encoding="iso-8859-1" ?>
<items>
<item id="machin">
<description>bla bla</description>
<related url="http://blabla" />
</item>

<item id="machinautre">
<description>bla bla</description>
<related url="http://blabla" />
</item>
</items>

Jusque là tout va bien.
Ensuite, le code JavaScript de Lisaraël

function loadXML(){
	// Routine de vérification si le navigateur gêre la méthode utilisée
	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 éxécuter ce script.');
	}
	docXml.load("items.xml");
}

Là ça passe toujours

Et là l'autre partie de son script


function biblio() {
	// on crée des variables de type Array, qui recoivent comme valeur les balises choisies dnas le document xml
	var item = docXml.getElementsByTagName('item');
	
	// 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)
	alert(item[0].firstChild.nodeValue);
}

Et là... marche pas Smiley ohwell
Ca me met
debugFirefox a écrit :

item[0] has no properties

Ca devrait me renvoyer bla bla mais non, quedal...

Je calle Smiley ohwell
Modifié par Olivier (25 Apr 2005 - 00:34)
Question subsidiaire, getElementById('machin') marchera-t-il ? (bah oui, en XML, id="" c'est pas définit comme un id alors y a pas de raison que ça marche Smiley ohwell )
J'ai fait quelques tests. Tout d'abord, j'ai mis un alert(item.length) dans biblio() pour voir combien il en trouvait. Lorsqu'on charge la page directement :
window.onload = function()
{
 loadXML();
 biblio();
}

...Il en trouve zéro.

Ensuite, j'ai fais :
window.onload = function()
{
 loadXML();
}
-->
</script>
<a href="javascript:alert(docXml.getElementsByTagName('item').length);">Click</a>


Et là, ça fonctionne ! Il semblerait donc que loadXML() mette un peu de temps à charger le fichier, et qu'il ne faut pas faire biblio() tout de suite.

J'ai donc mis :
window.onload = function()
{
 loadXML();
 setTimeout("biblio();", 100);
}

...Et là ça fonctionne.

Par contre, curieusement, ceci aussi fonctionne :
window.onload = function()
{
 loadXML();
 setTimeout("biblio();", 0);
}


Bref, je suppose que le temps à l'ordinateur de mettre en place setTimeout() est le temps nécessaire pour charger le fichier. Bref, ça répond pas directement à la question, mais au moins tu sais que tu n'as pas fait d'erreur dans ton code Smiley smile
Raahh la vache, j'étais à 300 lieues de penser à ça Smiley ohwell

Merci bien, ça fonctionne.

Enfin, à peu près...
Il ne me sort pas le contenu de mon <description>

J'ai fait :

	for (var i = 0 ; i < items.length ; i++) {
		if (items[ i].getAttribute('id') == subject) {
			subjectItem = items[ i].firstChild.nodeValue;
		}
	}
	alert(subjectItem);

subject c'est un paramètre de fonction, qui correspond à un des id des <item>.
Donc, ça devrait me sortir le contenu de <description> mais ça affiche juste rien, le alert est vide Smiley ohwell

Si vous avez une méthode plus propre en passant, je suis partant ^^
Le .getElementById() ne semble pas fonctionner (ce qui parait logique).
Modifié par Olivier (23 Apr 2005 - 17:56)
C'est pas croyable... je vois pas où je merde là Smiley ohwell

<parent>
<enfant>bla bla</enfant>
<enfant>bli bli</enfant>
</parent>



var par = XMLdoc.getElementsByTagName('parent')[0];
alert(par.firstChild.nodeValue + ' __ ' + par.lastChild.nodeValue);


Ca fait quedal...
Ca me met juste __ dans mon alert...

Qu'est ce qui cloche ... Je fais le boulet là ou quoi ??

<edit>Et par par.length (ou items.length plus haut) me donne la valeur attendue...

Sinon pour le setTimeout, 0 marche pas non plus parfois, en fait si tu fermes le navigateur, tu verras que ça marche plus avec 0 et que si tu actualises ça marchera, faut le temps de charger le doc. Je vais tester en appelant la fonction de traitement du fichier XML dans la fonction du chargement du fichier XML</edit>

<edit2>Wé ça change quedal, il prend bien son temps pour charger le fichier !! Faudra que je pense à faire ça en tâche de fond</edit>
Modifié par Olivier (23 Apr 2005 - 18:37)
Donc voilà ce que j'ai fait (pour que tu voies un peu ma "méthode de débugage" Smiley langue ) :
alert('+'+par.firstChild.nodeValue+'+__+'+par.lastChild.nodeValue+'+');


Et il me donne :
a écrit :
+
+__+
+


Les retours à la ligne laissent donc à supposer que le parser va lire jusqu'à la fin de la ligne. La preuve, si je mets :
<parent>Bla bla
	<enfant>Blabla</enfant>
	<enfant>Blabla</enfant>
</parent>

...Il me sort :
a écrit :
+Bla bla
+__+
+


Donc je mets tout sur une seule ligne :
<parent><enfant>Blabla</enfant><enfant>Blabla</enfant></parent>


Et ça fonctionne ! Smiley smile
Modifié par Nyro Xeo (23 Apr 2005 - 18:57)
C'est n'importe quoi ...
Je capte pas là Smiley ohwell

Y a pas moyen que ça marche avec un code propre et bien indenté ?
C'est quoi ces trucs chelou qu'il nous fait là ... Ca me dépasse... As tu une explication rationnelle a tout ceci ou bien est-ce simplement des tests ?
C'est normal, les espaces blancs (espaces, saut de ligne, tabulations) entre les balises comptent comme des noeuds texte.

edit: Au fait, pour choper l'élément racine de ton document, fais: XMLdoc.documentElement plutôt que XMLdoc.getElementsByTagName('parent')[0], c'est plus simple Smiley cligne

edit2: Oups, erreur de manipulation, navré.

<edit olivier>corrigé Smiley cligne </edit>
Modifié par Olivier (23 Apr 2005 - 20:20)
Ca compte comme des noeuds textes ???

Et donc, je peux me débrouiller comment pour récupérer mon contenu de balise ? Y a pas de solution autre que d'écrire tout sur une ligne à l'arrache ?

Okay pour documentElement Smiley cligne
j'prends la discussion au vol, mais, Olivier, as-tu déclaré ta variable xmlDoc en tout début de script ?

généralement, quand je le fais, ça marche.

sinon, techniquement, tu peux aussi appliquer un .onload à ton xmlDoc, mais ça, j'ai pas testé.
Modifié par Lisarael (24 Apr 2005 - 11:57)
Qu'ented tu par déclarer xmlDoc en tout début de script ?
Je la déclare avec le test sur activeX ou document.implementation

Dans la fonction loadXML

Peut être veux tu dire de simplement déclarer var xmlDoc; en début de script hors des fonctions ?

Pour le .onload sur xmlDoc, oui, c'est a essayé en effet.
oui, déclarer la variable en tout début de script, hors de tout.

le onload, j'ai pas essayé, aujourd'hui je n'ai pas le temps...

par contre, je sais que via Xul, il y aurait même moyen de faire des tranformation xsl/xml via javascript, mais je n'y suis pas arrivé. si quelqu'un y arrive, je suis preneur.
Modifié par Lisarael (24 Apr 2005 - 13:56)
Impecable ton truc de déclaration de variable en début de script Lisaraël Smiley cligne
Merci !

Par contre, je trouve ça assez etonnant, as tu de la doc sur ce point précis ?

En passant vu que tu es plutôt très callé niveau JavaScript et manipulation DOM, quelle est ta référence à ce niveau ?

Récapitualif des méthodes de gestion du DOM via JS etc ... Si c'est pas trop demandé Smiley murf

Merci à vous en tout cas, vous m'avez sorti de l'impasse Smiley smile
Olivier a écrit :
Impecable ton truc de déclaration de variable en début de script Lisaraël Smiley cligne
Merci !


C'est tout con, en déclarant ta variable globalement, tout va bien... (j'avais eu le même problème...)

a écrit :

Par contre, je trouve ça assez etonnant, as tu de la doc sur ce point précis ?


Sur quoi, la délcaration de variable globale / locale ?

C'est le premier point qu'on apprends sur les variables en js...

a écrit :

En passant vu que tu es plutôt très callé niveau JavaScript et manipulation DOM, quelle est ta référence à ce niveau ?

Récapitualif des méthodes de gestion du DOM via JS etc ... Si c'est pas trop demandé Smiley murf

Merci à vous en tout cas, vous m'avez sorti de l'impasse Smiley smile


Ma référence ?

Hum... euh... j'tape le nom de la propriété dans google et je lis ce qui en sort. Smiley lol

Par contre, pour la transfo xsl, j'm'étais renseigné, ça a l'air de marcher, mais là, j'ai un gros truc sous illustrator à rendre pour demain, alors cette aprèm, je me force à ne pas coder... lol

edit: en fait, cette année, les gens de ma classe apprennent le javascript, de zéro. Or, je faisais déjà du js depuis quelques petites années, à un niveau très modeste.
Et comme j'susi aps du genre à rester sur mes lauriers, j'ai profité de cette année pour approfondir autant que je pouvais le js, pendant que ma classe est en train de le voir pour la première fois.
Ce qui fait que je me suis aventuré du côté objet, et surtout du xml, qui me faisait de l'oeil depuis longtemps...
Mais depuis quelques semaines, je susi à fond dans le php/xml/xsl, et je déliasse un peu le js... Smiley murf
Modifié par Lisarael (24 Apr 2005 - 14:36)
Euh, je viens de me rendre compte d'un truc, ce que tu disais au niveau du onload sur xmlDoc, en fait l'idée que tu avais, c'est d'apeller la fonction de traitement du fichier XML au xmlDoc.onload ?

Un truc du style

xmlDoc.onload = function() {
fonctionTraitementXml();
};


C'est bien ça ?
Lisarael a écrit :

par contre, je sais que via Xul, il y aurait même moyen de faire des tranformation xsl/xml via javascript, mais je n'y suis pas arrivé. si quelqu'un y arrive, je suis preneur.


Ce n'est pas spécifique à XUL. On peut aussi faire ça par exemple dans un document xhtml.
Un exemple:


var xmlDoc = {
	loaded: false,
	tree: null,
	
	handleEvent: function() {
		if( xslDoc.loaded == true )
		{
			doTransform();
		}
		xmlDoc.loaded = true;
	}
};
var xslDoc = {
	loaded: false,
	tree: null,
	
	handleEvent: function() {
		if( xmlDoc.loaded == true )
		{
			doTransform();
		}
		xslDoc.loaded = true;
	}
};

function make()
{
	xmlDoc.tree = document.implementation.createDocument('', '', null);
	xslDoc.tree = document.implementation.createDocument('', '', null);
	
	xmlDoc.tree.addEventListener('load', xmlDoc, false);
	xslDoc.tree.addEventListener('load', xslDoc, false);
	
	xmlDoc.tree.load('./transform-src.xml');
	xslDoc.tree.load('./transform-src.xsl');
}

function doTransform()
{
	var xslt = new XSLTProcessor();
	
	xslt.reset();
	xslt.importStylesheet(xslDoc.tree);
	
	var result = xslt.transformToFragment(xmlDoc.tree, document);
	document.getElementsByTagName('body')[0].appendChild(result);
}

window.addEventListener('load', make, false);
Bobe> faudra que je teste ça, quand j'aurai le temps...
j'étais parti d'une même trame et j'avais eu des problèmes...
Modifié par Lisarael (24 Apr 2005 - 14:41)
Je vais devenir fou...

Je relance le navigateur, je relance le script et là il comprend plus items[ i].firstChild.firstChild.nodeValue; alors qu'avant de relancer le script ça fonctionné Smiley sweatdrop

Et le fichier XML est bien chargé puisqu'il trouve bien une autre partie du script...

/me sature !
Modifié par Olivier (24 Apr 2005 - 14:48)
xml et javascript, c'est une belle source de prise de tête...

depuis que je suis passé à xml/xsl, le tout gêré par php, mes migraines se font moins fréquentes... Smiley ravi

bon, en fait, moi, je comprends pas pourquoi ça :
.firstChild.firstChild.nodeValue


un seul firstChild devrait suffire, sinon, cible mieux ton élément.
Modifié par Lisarael (24 Apr 2005 - 15:29)
Pages :