Xml to Html Conversion

Posted Date: 30 Jun 2008 Total Responses: 1

Posted By: mohan Member Level: Bronze Points: 1

I have an xml file that needs to be parsed and displayed it in the html table on the browser with pure html. i guess this can be done by taking the help of java script. The requirement is to have file upload control to get the file and when we click on submit button, code should take xml file, parse it and displays it as html table with associated elements and attributes as rows and columns. i should not use any software, All this should be done from notepad. It's urgent, i really appreciate the help...thanks in advance

Responses

Author: Rajesh Ram Gupta 01 Jul 2008

Member Level: Silver

Rating:

Points: 6

hi mohan, try this, its reading the existing xml and showing the contents over browser, using javascript:

Reading XML data using JavaScript:

Code in HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Welcome To Insight Programs!</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<meta name="CODE_LANGUAGE" content="C#">

<script type="text/javascript">
var timeout = 1200;
var closetimer = 0;
var ddmenuitem = 0;
var ddsubmenuitem = 0;

function mopenSubMenu(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddsubmenuitem) ddsubmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddsubmenuitem = document.getElementById(id);
ddsubmenuitem.style.visibility = 'visible';
}

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
msubclose();
}

function msubclose()
{
if(ddsubmenuitem) ddsubmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>
<script language="javascript">

//readyState=4, shows: xml completely loaded, for 0-not initialized, 1-loading,2-loaded,3-worked with.
function CompletelyLoaded()
{
if (xmlDoc.readyState != 4)
{
return false;
}
}

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function fnReadXML()
{

var xmlObj;
xmlDoc.async = "false";
xmlDoc.onreadystatechange = CompletelyLoaded;
xmlDoc.load('C:\\ProgramXML.xml');
xmlObj=xmlDoc.documentElement;

var str;
str = '<html><head><LINK href=\"C:\\StyleSheet1.css\" type=\"text\/css\" rel=\"stylesheet\"></head>'
str = str + '<body><ul id=\"sddm\">';

var myNodes=xmlDoc.getElementsByTagName("Program");
//var myNodes1=xmlDoc.getElementsByTagName("Process");
//var myNodes2=xmlDoc.getElementsByTagName("SubProcess");

//For Program:
for(ProgramCount=0;ProgramCount<myNodes.length;ProgramCount++)
{
str = str + ' <li><a href=\"#\" onmouseover=\"mopen(\'m1\')\" onmouseout=\"mclosetime()\">'
str = str + myNodes.item(ProgramCount).attributes[0].value + '</a>';

//For Process:
var myNodes1 = myNodes.item(ProgramCount).childNodes;
for(ProcessCount=0;ProcessCount<myNodes1.length;ProcessCount++)
{
alert(myNodes1.length);
str = str + ' <li><a href=\"#\" onmouseover=\"mopen(\'m2\')\" onmouseout=\"mclosetime()\">'
str = str + myNodes1.item(ProcessCount).attributes[0].value + '</a>';
atr = str + ' </li>';

//For SubProcess:
var myNodes2 = myNodes1.item(ProcessCount).childNodes;
for(SubProcessCount=0;SubProcessCount<myNodes2.length;SubProcessCount++)
{
alert(myNodes2.length);
str = str + ' <li><a href=\"#\" onmouseover=\"mopen(\'m3\')\" onmouseout=\"mclosetime()\">'
str = str + myNodes2.item(SubProcessCount).text + '</a>';
atr = str + ' </li>';
}
}

//ChildNodes Values
atr = str + ' </li>';
alert(str);
}
str = str + '</ul></body></html>';
//alert(document.all.toString());
document.write(str);
}
</script>
<script id="clientEventHandlersJS" language="javascript">

</script>
</head>
<body>
<ul id="sddm">
<li>

</li>
<div style="clear:both"></div>
<INPUT id="Button1" type="button" value="Button" name="Button1" language="javascript" onclick="return fnReadXML()">
</body>
</html>

-----
Code in .css file:

#sddm
{ margin: 0;
padding: 0;
z-index: 30
}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial
}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}

#sddm li a:hover
{ background: #49A3FF
}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial
}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF
}

Post Reply

You must Sign In to post a response.


	Previous : Hi
	Return to Discussion Forum
	Post New Message
	Category: XML

Related Messages

dotNet Slackers BizTalk Adaptors Web Design

web conferencing services