Solved

Displaying a well-formed XML file using Javascript in IExplorer

Posted on 2008-10-26
18
677 Views
Last Modified: 2009-06-01
I have a very simple XML file that contains 30 records - the component stocks of the Dow Industrial Index.

I am trying to read and display this file within IExplorer using Javascript. The attached code is used to depict a button. When the button is pressed, the XML file is supposed to be read. For the purposes of this question, I'd be satisfied if I could just verify that it's been loaded, then just blurt the thing out in a call to alert().

Later, I am going to try to just list the 30 records. But, at present I don't seem to be able to read and dump it's contents.

Please see my very simple code that I attached. The XML file is also included.

Can anyone help me out here?

<DIV

<BUTTON TYPE=SUBMIT NAME="Button1" VALUE="Button1" OnClick=loadXML()>

	<IMG SRC= "button.gif">

</BUTTON>

</DIV>
 
 

<SCRIPT type=text/javascript>
 

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

function loadXML() 

{ 

 xmlDoc.async="false"; 

 xmlDoc.onreadystatechange=verify; 

 xmlDoc.load(c:\wmpub\equity3\Dow_Stocks_Data.xml); 

 xmlObj=xmlDoc.documentElement;

 alert(xmlObj.xml);  

}
 

function verify() 

{ 

 // 0 Object is not initialized 

 // 1 Loading object is loading data 

 // 2 Loaded object has loaded data 

 // 3 Data from object can be worked with 

 // 4 Object completely initialized 

 if (xmlDoc.readyState != 4) 

 { 

   return false; 

 } 

}

Open in new window

0
Comment
Question by:gbmcneil
  • 9
  • 9
18 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
You should use the more modern version of the microsoft xml object
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Testing 1 2</title>

    <script language="javascript">

    	var xmlDoc;

			function loadXML() {

			       xmlDoc=new ActiveXObject("Msxml2.DOMDocument");

			       xmlDoc.async=false;

			       xmlDoc.load("Dow_Stocks_Data.xml");

			       alert(xmlDoc.xml);

         //document.getElementById("RB").innerHTML = test[1].xml;

        }

			function verify() 

				{ 

				 // 0 Object is not initialized 

				 // 1 Loading object is loading data 

				 // 2 Loaded object has loaded data 

				 // 3 Data from object can be worked with 

				 // 4 Object completely initialized 

				 if (xmlDoc.readyState != 4) 

				 { 

				   return false; 

				 } 

				}

		</script>

</head>
 

<body>

	<div>

		<div id="RB"></div>

	<div>

	<div>

		<button type="SUBMIT" name="Button1" value="Button1" onclick="loadXML();">

			<img src= "button.gif"/>

		</button>

	</div>

</body>

</html>

Open in new window

0
 

Author Comment

by:gbmcneil
Comment Utility
Gertone -

I see that you are back at it. I should hire you directly. Let me play with the code a bit.

You are a God-Send. This must be my lucky day!

Gordon
0
 

Author Comment

by:gbmcneil
Comment Utility
Hello Gertone.

I can get down to the point of the alert(), but then the alert() displays nothing. I've check my file name. It's correct. I notice that Verify() is no longer being referenced. Maybe the XML file is not being loaded.

Any thoughts?  Many thanks for your help.

Gordon





<DIV

<BUTTON TYPE=SUBMIT NAME="Button1" VALUE="Button1" OnClick=loadXML()>

	<IMG SRC= "button.gif">

</BUTTON>

</DIV>
 

<script language="javascript">

var xmlDoc;

function loadXML() {

	xmlDoc=new ActiveXObject("Msxml2.DOMDocument");

	xmlDoc.async=false;

	xmlDoc.load("c:\wmpub\equity3\Dow-Stocks-Data.xml");

	alert(xmlDoc.xml);

        //document.getElementById("RB").innerHTML = test[1].xml;

}

        

function verify() { 

	// 0 Object is not initialized 

	// 1 Loading object is loading data 

	// 2 Loaded object has loaded data 

	// 3 Data from object can be worked with 

	// 4 Object completely initialized 

	if (xmlDoc.readyState != 4) 

	{ 

	return false; 

	} 

}

</script>

Open in new window

0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
correct, I don't verify,
I don't think the onreadystatechange is triggered when the async is false
Can you start by putting the xml file in the same directory as the html file?
I hope you are not doing this from ASP, since you would then need server paths
0
 
LVL 60

Accepted Solution

by:
Geert Bormans earned 250 total points
Comment Utility
Hi Gordon,

Your next question would likely be...
How can I show the table?

Well, I would recommend XSLT for that.
Since I am about to go to bed,
here is an example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Testing 1 2</title>

    <script language="javascript">

			function TransF() 

				{

			       // create and load the XML document

			       var oXML = new ActiveXObject("Msxml2.DOMDocument");

			       oXML.async = false;

			       oXML.load("Dow_Stocks_Data.xml");

			       // create and load the XSL document

			       var oXSL = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");

			       oXSL.async = false;

			       oXSL.load("Dow-Stocks.xsl");

			       // create the template processor

			       var oTmpl = new ActiveXObject("Msxml2.XSLTemplate");

         		 oTmpl.stylesheet = oXSL;

		         oProc = oTmpl.createProcessor();

		         oProc.input = oXML;

		         // make the transform

						 oProc.transform();

         		 var resHTM = oProc.output;

         		 // write the transformation result as the inner HTML of the div

         		 document.getElementById("RB").innerHTML = resHTM;

        }

		</script>

</head>
 

<body>

	<div>

		<button type="SUBMIT" name="Button1" value="Button1" onclick="TransF();">

			<img src= "button.gif"/>

		</button>

	</div>

	<div>

		<div id="RB"></div>

	<div>

</body>

</html>

Open in new window

0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Here is the content of Dow-Stocks.xsl

now, if you push the button, the table will appear
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="Records">

    <table border="1">

        <tr>

            <xsl:for-each select="Record[1]/*">

                <th><xsl:value-of select="name()"/></th>

            </xsl:for-each>

            <xsl:apply-templates select="Record"/>

        </tr>

    </table>

</xsl:template>

    <xsl:template match="Record">

        <tr>

            <xsl:for-each select="*">

                <td><xsl:value-of select="."/></td>

            </xsl:for-each>

        </tr>

    </xsl:template>

</xsl:stylesheet>

Open in new window

0
 

Author Comment

by:gbmcneil
Comment Utility
Gertone -

Okay. I've got progress at the alert() level. I pulled out the "c:\wmpub\equity3\" from the XML file's definition and it worked. I've got a blob of XML data.

Give me a little more time to absorb your other comments. I'll be back to you shortly.

Thanks again for your help.

Gordon
0
 

Author Comment

by:gbmcneil
Comment Utility
Gertone -

I'll talk to you tomorrow. Still struggling a bit.

Gordon
0
 

Author Comment

by:gbmcneil
Comment Utility
Hello Gertone.

While I can see a dump of the XML red using the alert() function, I am unable to display them as a table.

How about if we go back to the first code block you posted at 6:34PM yesterday?

A part of the code went something like this:

function loadXML() {
       xmlDoc=new ActiveXObject("Msxml2.DOMDocument");
       xmlDoc.async=false;
       xmlDoc.load("Dow_Stocks_Data.xml");
       alert(xmlDoc.xml);
       //document.getElementById("RB").innerHTML = test[1].xml;
        }

Now, if I were to comment out the alert function call and uncomment the "document.getElementByID" line, would that not successfully display one record in <DIV>RB</DIV>? If so, I am not succeeding and I've changed "test[1].xml" to "xmlDoc[1].xml".

In otherwords, maybe the problem is displaying anything in division RB.

Your thoughts?

Gordon





0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
this is from an old example, so test is not defined
xmlDoc.xml would work, but you would not see the tags
in order to display one record, you would need some DOM methods

try this:
    function loadXML() {
       xmlDoc=new ActiveXObject("Msxml2.DOMDocument");
       xmlDoc.async=false;
       xmlDoc.load("Dow_Stocks_Data.xml");
       //alert(xmlDoc.xml);
       document.getElementById("RB").innerHTML = xmlDoc.childNodes[1].childNodes[0].xml;
        }

but you will see that the xml is not shown as XML
of course you could alert it to see what is really going on

    function loadXML() {
       xmlDoc=new ActiveXObject("Msxml2.DOMDocument");
       xmlDoc.async=false;
       xmlDoc.load("Dow_Stocks_Data.xml");
       //alert(xmlDoc.xml);
       alert(xmlDoc.childNodes[1].childNodes[0].xml);
       //document.getElementById("RB").innerHTML = xmlDoc.childNodes[1].childNodes[0].xml;
        }
0
 

Author Comment

by:gbmcneil
Comment Utility
Okay Gertone -

I got the  xmlDox.childNodes[1].childNodes[0].xml code working. You are really working for a mere 250 points. Can I upgrade the point reward. Also, has someone written a book on this type of programming. There are so many things I'd like to do with the XML code block - make greater space between the data, make the characters bold, sort it a different way, etc.

In any event, we are now down to the transformation. At this stage I know that the XML file is readable. That leaves the XSL file and the code below as being potential problems. I am now getting nothing from after the function TransF() is called.

Any ideas? A million thanks for your help so far. Where do I send the check?

Gordon



function TransF() {

       // create and load the XML document

       var oXML = new ActiveXObject("Msxml2.DOMDocument");

       oXML.async = false;

       oXML.load("Dow_Stocks_Data.xml");

       

       // create and load the XSL document

       var oXSL = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");

       oXSL.async = false;

       oXSL.load("Dow-Stocks-Data.xsl");

       

       // create the template processor

       var oTmpl = new ActiveXObject("Msxml2.XSLTemplate");

       oTmpl.stylesheet = oXSL;

       oProc = oTmpl.createProcessor();

       oProc.input = oXML;

       

       // make the transform

       oProc.transform();

       var resHTM = oProc.output;

       // write the transformation result as the inner HTML of the div

       document.getElementById("RB").innerHTML = resHTM;

}

Open in new window

0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Not very much books about this, since you use a variety of techniques... html, javascript and xslt
the sad thing is that you need to be carefull with webreferences, since the higher percentage of web examples has the wrong msxml active X component

Put the XSLT in the same path as the html file (for now), make sure the name is OK, make sure that it is wellformed
I would put an alert for both the oXML and oXSL object and see what it gives.
Likely you don't see the xslt loaded for one reason or another
0
 

Author Comment

by:gbmcneil
Comment Utility
Hi Gertone -

I got it to work. It was a spelling error in the name of my XSL file. I used underscores instead of dashing in the file name.

Once again, you get the prize. Below is the output I received, although it is not formatted as I view it here on my computer.  Nonetheless, it needs more formatting at this end to get it to appear as I'd like.

I'm going to have to post several more questions to get the data presentation adjusted. Perhaps you could help me out. I will do a better job describing the formatting issues in those questions.

Thanks very much for your help. I've noticed there is really no one else out there who has even taken a stab at answering my questions. It must be a black art, of sorts.

Your friend,

Gordon


 
Symbol Exchange EquityName BeginPrice EndPrice Difference Change 

MMM NYSE 3M Company 62.78 59.64 -3.14 -5.00% 

AA NYSE Alcoa Inc. 15.22 9.41 -5.81 -38.17% 

AXP NYSE American Express 26.01 24.05 -1.96 -7.54% 

ATT NYSE AT & T Inc. 26.98 24.68 -2.3 -8.52% 

BAC NYSE Bank of America 29.46 21.07 -8.39 -28.48% 

BAC NYSE Boeing Company 47.99 45.24 -2.75 -5.73% 

CAT NYSE Caterpillar Inc. 39.13 33.3 -5.83 -14.90% 

CVX NYSE Chevron Corp. 68.19 63.91 -4.28 -6.28% 

C NYSE Citigroup Inc. 19.54 12.14 -7.4 -37.87% 

KO NYSE Coca-Cola Inc. 44.98 41.61 -3.37 -7.49% 

DD NYSE DuPont E.I. 36.19 29.33 -6.86 -18.96% 

XOM NYSE Exxon Mobil Corp 70.96 69.04 -1.92 -2.71% 

GE NYSE General Electric 22.99 17.83 -5.16 -22.44% 

GM NYSE General Motors 8.41 5.95 -2.46 -29.25% 

HPQ NYSE Hewlett-Packard 34.58 32.44 -2.14 -6.19% 

HD NYSE Home Depot Inc. 20.65 18.51 -2.14 -10.36% 

IBM NYSE IBM 84.96 82.07 -2.89 -3.40% 

INTC NASDAQ Intel Corp 15.87 14.28 -1.59 -10.02% 

JNJ NYSE Johnson & Johnson 63.45 60.79 -2.66 -4.19% 

JPM NYSE JPMorgan Chase 41.82 35.43 -6.39 -15.28% 

KFT NYSE Kraft Foods 31.71 27.1 -4.61 -14.54% 

MCD NYSE McDonalds Corp 57.59 53.06 -4.53 -7.87% 

MRK NYSE Merck & Company 32.55 27.35 -5.2 -15.98% 

MSFT NASDAQ Microsoft Corp 23.57 21.96 -1.61 -6.83% 

PFE NYSE Pfizer Inc. 19.67 16.57 -3.1 -15.76% 

PG NYSE Proctor & Gamble 61.68 58.87 -2.81 -4.56% 

UTX NYSE United Technologies 50.14 47.31 -2.83 -5.64% 

VZ NYSE Verizon Communic 29.5 25.08 -4.42 -14.98% 

WMT NYSE Wal-Mart Stores 53.98 51.4 -2.58 -4.78% 

DIS NYSE Walt Disney Co. 25.99 22.61 -3.38 -13.01% 

Open in new window

0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
Hi Gordon,
You are welcome.
There are quite some others here that would answer the same question teh same way.
Note that this question started on a Sunday, maybe that causes the low respons

For styling you have two options
- CSS
- more XSLT
or even combinations

You can make sorting dynamic by passing a parameter
Lots of fun things going on, just klet us know what you need

cheers

Geert
0
 

Author Comment

by:gbmcneil
Comment Utility
Hi Gertone:

I just posted another question. It deals with formating the data (now that I can get the XML to list as output).

I don't see how CSS would help unless the CSS values applied to the entire table or I broke down the XML into multiple <DIVs or pieces. And, even then, I don't know if CSS could justify the data in the numeric columns. I don't think so.

So, I think I've got to figure this XSL coding out.

Would the Wrox book "XSLT 2.0 and XPath Programmer's Reference" contribute anything here. Some Wrox books are great; the others are not so helpful.

Thanks again.

Gordon
 
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
It would sound closer to reality if you said... some Wrox books are really good, most suck completely :-)
I have a fair list of them and am not so happy with Wrox books.... but the one you refer too is extremely good.
Some comments:
- It is a reference rather than a tutorial like book
- It deals with XSLT2.0 and you can't use that in a browser.
For a starter I can highly recommend this book
http://oreilly.com/catalog/9780596000530/
it is out of print and has been replaced by a XSLT2 version, I have not yet seen. I assume it would be a good book as well.
If you can get the old version, that would really get you started without the overhead you can't use anyway

I saw that Kurt allready helped you with changing the XSLT in your other question
0
 

Author Comment

by:gbmcneil
Comment Utility
Hi Geert:

As I was typing my previous message to you, I used stronger language when it came to my assessment of Wrox books. Then I edited it to "not so helpful". I was worried that someone my take exception to my opinion, and as you say some of their books are darn good.

I appreciate the info about XSLT2.0 and I purchased the O'Rielly book by Tidwell.

Thanks for the info.

Gordon
0
 
LVL 60

Expert Comment

by:Geert Bormans
Comment Utility
good luck with the book
> Then I edited
you are obviously more carefull then I am :-)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now