Archief - XML: databinding met html

saiko · 27 apr 2005

ik heb een klein xlm filetje geschreven

<nieuws>
<datum_nieuwspost>25/04/05</datum_nieuwspost>
<nieuwspost>dit is een testje, om te zien als onze xml database werkt</nieuwspost>
</nieuws>

nu moet hij deze uitlezen in een tabel in een html pagina.
ik krijg de file reeds geparsed, maar hij wil hem maar niet in een tabel steken.
ik heb het aan onze docent gevraagd, maar die zegt dat ik het zelf maar moet uitzoeken, op internet niet echt veel gevonden (toch niets bruikbaars)

en voor je afkomt met doe het met asp ofzo...dat mag niet!

dit is mijn code in het html bestand

<script type="text/javascript" src="javascript/parseXml.js"></script>
<script type="text/javascript">

function init()
{
parseXml("nieuws.xml")
maakTabel();
}
function getXml()
{
var nieuwsPosts = oDomDoc.getElementsByTagName("nieuwspost")

for(var i=0; i<nieuwsPosts.length-1; i++)
{
var sDatum = nieuwsPosts.item(i).firstChild.nodeValue;
var sNieuws = nieuwsPosts.item(i).firstChild.firstChild.nodeValue;

var tr = document.createElement("tr");
var td0 = document.createElement("td");
td0.appendChild(document.createTextNode(sDatum));

var td1 = document.createElement("td");
td1.appendChild(document.createTextNode(sNieuws));

tr.appendChild(td0);
tr.appendChild(td1);

tbody.appendChild(tr);
}
}

function maakTabel()
{
var table = document.createElement("table");
table.setAttribute("id","tblNieuws")

//de hoofding

var tbody = document.createElement("tbody");
table.appendChidl(tbody);
getXml();

document.getElementById("locatieNode").appendChild(table);
}

</script>

ps: moest iemand een gemakkelijkere manier weten...zeg het maar (mss met statische tabel ofzo?)

alleszinds reeds bedankt

DarkBone · 28 apr 2005

Lijkt me een scope probleem van uw tbody variabele
Steek de functie getXml() in uw maakTabel() en het zou moeten werken.

Nu is de variabele tbody gewoon niet gekend in getXml() aangezien die gedefinieerd wordt in maakTabel(). Het feit dat je getXml() aanroep in maakTabel() wil niet zeggen dat ie die variabele ook gaat vinden dan. JavaScript heeft geen dynamische scoping, maar statische scoping.

DarkBone · 28 apr 2005

En moet het trouwens dit niet zijn?

for(var i=0; i<nieuwsPosts.length; i++)

DarkBone · 28 apr 2005

Code:

<script type="text/javascript" src="javascript/parseXml.js"></script>
<script type="text/javascript">
<!--
	function init()
	{
		parseXml("nieuws.xml")
		maakTabel();
	}

	function maakTabel()
	{
		var table = document.createElement("table");
		table.setAttribute("id","tblNieuws")

	//de hoofding

		var tbody = document.createElement("tbody");
		table.appendChidl(tbody);

		var nieuwsPosts = oDomDoc.getElementsByTagName("nieuwspost")

		for (var i=0; i<nieuwsPosts.length; i++)
		{
			var sDatum	= nieuwsPosts.item(i).firstChild.nodeValue;
			var sNieuws	= nieuwsPosts.item(i).firstChild.firstChild.nodeValue;

			var tr = document.createElement("tr");

			var td0 = document.createElement("td");
			td0.appendChild(document.createTextNode(sDatum));

			var td1 = document.createElement("td");
			td1.appendChild(document.createTextNode(sNieuws));

			tr.appendChild(td0);
			tr.appendChild(td1);

			tbody.appendChild(tr);
		}

		document.getElementById("locatieNode").appendChild(table);
	}

-->
</script>

saiko · 28 apr 2005

merci voor jullie antwoorden al,

nu we hebben het aan het werk gekregen mits enkele aanpassingen

1/ XML FILE
=========

Code:

<nieuws>


	<nieuwsitem>
		<datum_nieuwspost>25/04/05</datum_nieuwspost>
		<nieuwspost>dit is een testje, om te zien als onze xml database werkt</nieuwspost>
	</nieuwsitem>
	
	<nieuwsitem>
			<datum_nieuwspost>25/05/05</datum_nieuwspost>
			<nieuwspost>hupla hoi</nieuwspost>
	</nieuwsitem>
	
	<nieuwsitem>
			<datum_nieuwspost>25/06/05</datum_nieuwspost>
			<nieuwspost>hoi!</nieuwspost>
	</nieuwsitem>
	

</nieuws>

2/ xHTML
=======

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script type="text/javascript">

	function init()
	{
		parseXml("nieuws.xml");
		maakTabel();
	}
	
	function parseXml(sFileName)
	{
		//0.escaped fileName herstellen
		sFileName=unescape(sFileName);

	
		//1. instantie van  DOM aanmaken in geheugen  
		//foutdetectie IE

		if (navigator.userAgent.indexOf("MSIE") != -1)
		{
		oDomDoc =  new ActiveXObject("Microsoft.XMLDOM");
		}

		//foutdetectie NN

		if((navigator.appName == 'Netscape') && ( navigator.userAgent.indexOf('opera') == -1))
		{
			oDomDoc = document.implementation.createDocument("Nspace","rootElmnt", null);
		}

		oDomDoc.async = false;				// volledig opladen 
		oDomDoc.validateOnParse=true;		//default : true

		//2. DOM opladen met XML
		oDomDoc.load(sFileName);
		documentLoaded("") ;
	}

	function documentLoaded() 
	{
		// foutdetectie met DTD - enkel in IE

		if(navigator.userAgent.indexOf("MSIE") != -1) 	
		{
			var oErrorXML = oDomDoc.parseError;
			
			if (oErrorXML.errorCode != 0 )
			{
				alert( oErrorXML.reason + '\n Line ' + oErrorXML.line ) ;
			} 

		}
		else
		{
			if(oDomDoc.documentElement.nodeName == "parsererror")
			{
				alert("error");
			}
		}
}
	
	function getXml()
	{
		//alert(oDomDoc.getElementsByTagName("nieuwspost"));
		var nieuwsPosts = oDomDoc.getElementsByTagName("nieuwsitem");
		
				
		for(var i=0; i<=nieuwsPosts.length-1; i++)
		{
			var sDatum = nieuwsPosts.item(i).firstChild.firstChild.nodeValue;
			var sNieuws = nieuwsPosts.item(i).lastChild.firstChild.nodeValue;
			
			var tr = document.createElement("tr");
			var td0 = document.createElement("td");
			td0.appendChild(document.createTextNode(sDatum));
			
			var td1 = document.createElement("td");
			td1.appendChild(document.createTextNode(sNieuws));
			
			tr.appendChild(td0);
			tr.appendChild(td1);
			
			tbody.appendChild(tr);
		}
	}
	
	function maakTabel()
	{
		var table = document.createElement("table");
		table.setAttribute("id","tblNieuws")
		
		//de hoofding
		
		tbody = document.createElement("tbody");
		table.appendChild(tbody);
		getXml();
		
		document.getElementById("locatieNode").appendChild(table);
	}

</script>
<style type="text/css">

body {color:#FFFFFF;}

</style>
</head>

<body onload="init()">

<div id="locatieNode" style="width: 200px; height: 400px; background-color: #003399; "></div>


</body>
</html>

In IE, werkt dit perfect
In FF krijg je in de java console box deze foutmelding
var sDatum = nieuwsPosts.item(i).firstChild.firstChild.nodeValue; has no properties

ik begin zo aardig tenden te komen van die crossbrowsing problemen :|

WoDkA · 28 apr 2005

euh, moet da zo ingewikkeld ? :/

ik zou daar gewoon ne xsl aankoppelen die da beke schoon opmaakt ..

door dit eraan te hangen bv. :
http://users.pandora.be/wodka/xml/nieuws.xsl

krijg je dit :
http://users.pandora.be/wodka/xml/nieuws.xml

hier nu wel div's gebruikt, maar alles in een tabel smijte is maar kleine moeite ..

saiko · 28 apr 2005

ja ik weet dat het wellicht een hele ommetoer is, maar voor ons eindwerk mogen we alleen maar XML databinding gebruiken voor als je een klein databaseje wil gebruiken

nu ik zit nu in de les...zal sebiets es vragen an dien typ alstie het ook niet in FF aant werk krijgt

xml · 28 apr 2005

Echt zo'n typische school mentaliteit. Alles is vooraf bepaald, andere oplossingen zijn onmogelijk, ... triestig eigenlijk. :/

Succes ermee..

`SeriOUs · 28 apr 2005

PIH zeker?

Ik had er ook meer van verwacht. Hun theorie en oplossingen zijn maar zo-zo. Ik heb altijd een gevoel dat ik niet iets correct leer.

saiko · 28 apr 2005

ja idd dat vind ik ook

saiko · 28 apr 2005

`SeriOUs zei:
PIH zeker?

Ik had er ook meer van verwacht. Hun theorie en oplossingen zijn maar zo-zo. Ik heb altijd een gevoel dat ik niet iets correct leer.

idd

kvin theorie enzo wel goed, maar soms wordt het gewoon niet goed uitgelegd, of geven ze je 4 oplossingen van hoe je het niet moet doen, die ze dan super uitwerken & 1 oplossing van hoe het wel moet en die gaat dan in een sneltempo (zoals nu van dat xml databinding)

ahja...kzal nu maar mijn klokje in javascript afwerken :ironic:

FeNiX4LiFe · 28 apr 2005

xml zei:
Echt zo'n typische school mentaliteit. Alles is vooraf bepaald, andere oplossingen zijn onmogelijk, ... triestig eigenlijk. :/

Succes ermee..

wat is het nut dan om iets aan te leren als je altijd hetzelfde gaat gebruike é

zo leerde uiteindelijk ook niks bij é

saiko · 28 apr 2005

En eindelijk een werkende crossbrowser code!!!!:

1/HTML
=====

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script type="text/javascript">

	function init()
	{
		parseXml("nieuws.xml");

		maakTabel();
	}

function parseXml(sFileName)
	{
		//0.escaped fileName herstellen
		sFileName=unescape(sFileName);
		alert(sFileName);
	
		//1. instantie van  DOM aanmaken in geheugen  
		//foutdetectie IE

		if (navigator.userAgent.indexOf("MSIE") != -1)
		{
		oDomDoc =  new ActiveXObject("Microsoft.XMLDOM");
		}

		//foutdetectie NN

		if((navigator.appName == 'Netscape') && ( navigator.userAgent.indexOf('opera') == -1))
		{
			oDomDoc = document.implementation.createDocument("Nspace","rootElmnt", null);
		}

		oDomDoc.async = false;				// volledig opladen 
		oDomDoc.validateOnParse=true;		//default : true

		//2. DOM opladen met XML
		oDomDoc.load(sFileName);
		documentLoaded("") ;
	}

	function documentLoaded() 
	{
		// foutdetectie met DTD - enkel in IE

		if(navigator.userAgent.indexOf("MSIE") != -1) 	
		{
			var oErrorXML = oDomDoc.parseError;
			
			if (oErrorXML.errorCode != 0 )
			{
				alert( oErrorXML.reason + '\n Line ' + oErrorXML.line ) ;
			} 
			else
			{
			alert (oDomDoc.documentElement.nodeName + " is  loaded .") ;
			}
		}
		else
		{
			if(oDomDoc.documentElement.nodeName == "parsererror")
			{
				alert("error")
			}
			else
			{
				alert(oDomDoc.documentElement.nodeName + " is loaded " );
			}
		}
}

	function getXml()
	{
		//alert(oDomDoc.getElementsByTagName("nieuwspost"));
		var nieuwsPosts = oDomDoc.getElementsByTagName("nieuwsitem");

				var j ;
		for(var j=0; j<nieuwsPosts.length; j++)
		{
			var sDatum = nieuwsPosts.item(j).getElementsByTagName("datum_nieuwspost").item(0).firstChild.nodeValue;

			var sNieuws = nieuwsPosts.item(j).getElementsByTagName("nieuwspost").item(0).firstChild.nodeValue;

			var tr = document.createElement("tr");
			var td0 = document.createElement("td");
			td0.appendChild(document.createTextNode(sDatum));
			
			var tr = document.createElement("tr");
			var td1 = document.createElement("td");
			td1.appendChild(document.createTextNode(sNieuws));

			tr.appendChild(td0);
			tr.appendChild(td1);

			tbody.appendChild(tr);
		}
	}

	function maakTabel()
	{
		var table = document.createElement("table");
		table.setAttribute("id","tblNieuws")

		//de hoofding

		tbody = document.createElement("tbody");
		table.appendChild(tbody);
		getXml();

		document.getElementById("locatieNode").appendChild(table);
	}

</script>
<style type="text/css">

body {color:#FFFFFF;}

</style>
</head>

<body onload="init()">

<div id="locatieNode" style="width: 200px; height: 400px; background-color: #003399; "></div>


</body>
</html>

2/ XML
=====

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
<nieuws>
	<nieuwsitem>
		<datum_nieuwspost>25/04/05</datum_nieuwspost>
		<nieuwspost>dit is een testje, om te zien als onze xml database werkt</nieuwspost>
	</nieuwsitem>
	<nieuwsitem>
			<datum_nieuwspost>25/05/05</datum_nieuwspost>
			<nieuwspost>hupla hoi</nieuwspost>
	</nieuwsitem>
	<nieuwsitem>
			<datum_nieuwspost>25/06/05</datum_nieuwspost>
			<nieuwspost>hoi!</nieuwspost>
	</nieuwsitem>
</nieuws>

Joriz · 28 apr 2005

xsl is er voor gemaakt, durf die docent er mee te confronteren

saiko · 28 apr 2005

ja ik heb vanmiddag nog een eindje met hem gepraat, en die typ zei ook van "had het van mij afgehangen, mochten jullie elke kennis dat je had gebruiken"
maar zijn collega's waren daar zo te zien niet mee akkoord

nuja...het is gelukt, dast voornaamste

Asshen · 28 apr 2005

Xml parsen in een browser via javascript kan (voor zover ik weet, maar zoveel weet ik niet) enkel met het Microsoft XmlDom object... dus == "Goodbye browser compatilibity".

En XSL Templates voor XML documenten, alhoewel heel cool (heb er ook al mee zitten prutsen

), worden ook nog niet door al te veel browsers goed ondersteund.

K.

saiko · 28 apr 2005

Asshen zei:
Xml parsen in een browser via javascript kan (voor zover ik weet, maar zoveel weet ik niet) enkel met het Microsoft XmlDom object... dus == "Goodbye browser compatilibity".

En XSL Templates voor XML documenten, alhoewel heel cool (heb er ook al mee zitten prutsen ), worden ook nog niet door al te veel browsers goed ondersteund.

K.

dan ben je niet zo goed op de hoogte

say hello to == crossbrowser

heb mijn parser zo geschreven dat hij eerst checked welke browser het is

als je de code es wil zien van mijn parser

Code:

function parseXml(sFileName)
	{
		//0.escaped fileName herstellen
		sFileName=unescape(sFileName);
			
		//1. instantie van  DOM aanmaken in geheugen  
		//foutdetectie IE

		if (navigator.userAgent.indexOf("MSIE") != -1)
		{
		oDomDoc =  new ActiveXObject("Microsoft.XMLDOM");
		}

		//foutdetectie NN

		if((navigator.appName == 'Netscape') && ( navigator.userAgent.indexOf('opera') == -1))
		{
			oDomDoc = document.implementation.createDocument("Nspace","rootElmnt", null);
		}

		oDomDoc.async = false;				// volledig opladen 
		oDomDoc.validateOnParse=true;		//default : true

		//2. DOM opladen met XML
		oDomDoc.load(sFileName);
		documentLoaded("") ;
	}

	function documentLoaded() 
	{
		// foutdetectie met DTD - enkel in IE

		if(navigator.userAgent.indexOf("MSIE") != -1) 	
		{
			var oErrorXML = oDomDoc.parseError;
			
			if (oErrorXML.errorCode != 0 )
			{
				alert( oErrorXML.reason + '\n Line ' + oErrorXML.line ) ;
			} 

		}
		else
		{
			if(oDomDoc.documentElement.nodeName == "parsererror")
			{
				alert("error")
			}

		}
}

Asshen · 29 apr 2005

Zoals ik al zei... zoveel weet ik ook niet

Ik heb meer niet dan wel in de les gezeten tijdens MCT :applause: en toch telkens 1e zit

saiko · 29 apr 2005

^^ hih, ja dat was mijn strategie int eerste trimester...
maar nu ga ik toch wat regulmatiger, want zo'n danig goed programmeur zennek nie :d

en ik wil niet zoals vorig jaar, weer een andere richting pakken en weer herbeginne

Asshen · 29 apr 2005

saiko zei:
^^ hih, ja dat was mijn strategie int eerste trimester...
maar nu ga ik toch wat regulmatiger, want zo'n danig goed programmeur zennek nie :d

en ik wil niet zoals vorig jaar, weer een andere richting pakken en weer herbeginne

Ik wist niet dat er een Xml parser object voor andere browsers bestond

Heb dus ook weer iets bijgeleerd, bedankt.

Archief - XML: databinding met html

saiko

Legacy Member

DarkBone

Legacy Member

DarkBone

Legacy Member

DarkBone

Legacy Member

saiko

Legacy Member

WoDkA

Legacy Member

saiko

Legacy Member

xml

Legacy Member

`SeriOUs

Legacy Member

saiko

Legacy Member

saiko

Legacy Member

FeNiX4LiFe

Legacy Member

saiko

Legacy Member

Joriz

Legacy Member

saiko

Legacy Member

Asshen

Legacy Member

saiko

Legacy Member

Asshen

Legacy Member

saiko

Legacy Member

Asshen

Legacy Member