Insert XML file into HTML

[Spycat]

Hello all,

This doesn't seem that it should be terribly difficult to do, but of course it is (for me anyway).

I own a golf site, and I would like to insert the world rankings, which is in an XML format file into an existing html file. I have applied a css file to style the XML.
Here is the file in question, rankings.xml:
http://www.bigputts.org/rankings.xml

Here is the page I would like to insert it into:
http://www.bigputts.org/info.html

I would like to insert the XML below the date, right in between the two horizontal rules.

For completeness sake, here is the css I used to style the xml:
http://www.bigputts.org/rankings.css

I tried using an iframe, but of course, there is the height and width issue with that.
I do NOT want to get into a whole mySQL database thing with this.

It seems like it shouldn't be that complex a thing to do, but maybe it is(?).

Any clues? :?:

Rick

[Spycat]

Thought there should be a way to edit my orig. post, but I guess I will have to fillow up with this "Reply".

Should add that I tried to insert the xml into the html with a server side include:
<!--#include file="rankings.xml" -->"

While it indeed did put rankings.xml into the html, it didn't pick up the css style sheet I specified within that file:
<?xml-stylesheet type="text/css" href="rankings.css"?>

[macgurl70]

Ok, the code is going to be long - but I have had a similar project and this is what worked for me. A sample page (of just this code being used) can be seen at

http://www.roundboxdesign.com/table_test/xmltry/XML_test.html

Currently it just separates the xml file to show either dealers or distributors - nothing added yet. However it does show how to bring in the xml file.

I used a javascript to bring in the xml code, this parses the xml document so I can call on the specific child nodes.

This is the part of the Javascript that calls in the XML. I am sure there are more efficient codes - but this worked well for me and got the job done.

if (window.XMLHttpRequest) {
		//for firefox, opera and safari browswers
		var xmlHttp = new XMLHttpRequest();
	}
	if (typeof XMLHttpRequest == "undefined")
  XMLHttpRequest = function () {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
      catch (e) {}
    try { return new ActiveXObject("Msxml2.XMLHTTP"); }
      catch (e) {}
    //Microsoft.XMLHTTP points to Msxml2.XMLHTTP.3.0 and is redundant
    throw new Error("This browser does not support XMLHttpRequest.");
  };
	
	
/*@cc_on @if(@_jscript)
var xmlHttp=new ActiveXObject("Microsoft.XMLDOM");
xmlHttp.async="false";
xmlHttp.load("sellers.xml");
@else */
xmlHttp.open("GET","sellers.xml",false);
xmlHttp.send(false);
var xmlDoc= xmlHttp.responseXML;
/*@end
@*/

This included the commenting out for Internet Explorer. Before I used the hacks it would only work for Firefox.

Below is the javascript code I used to bring in the information to populate the divs (I didn't use tables)

function listdiv5() {
	var headID = document.getElementsByTagName("head")[0];
	/*@cc_on @if(@_jscript)
	var cssNode=document.createElement("<link type='text/css' rel='stylesheet' href='form_test.css'>");
	@else */
	var cssNode = document.createElement("link");
	cssNode.setAttribute('type','text/css');
	cssNode.setAttribute('rel','stylesheet');
	cssNode.setAttribute('href','form_test.css');
	/* @end @*/
	headID.appendChild(cssNode);
	/*@cc_on @if(@_jscript)
	var storeinfo= xmlHttp.getElementsByTagName("store");
	@else */
	var storeinfo = xmlDoc.getElementsByTagName("store");
	/* @end @*/
	/*@cc_on @if(@_jscript)
	var xmllist2=document.createElement("<div id='xmllist2'>");
	@else */
	var xmllist2 = document.createElement("div");
	xmllist2.setAttribute('id','xmllist2');
	/* @end @*/
	var distresults = document.getElementById('finallist2');
	document.getElementById('header_two').innerHTML = "Complete Listing of Neuma Dealers";
	for (i=0; i<storeinfo.length; i++) {
		/*@cc_on @if(@_jscript)
		var divname=document.createElement("<div id='name'>");
		@else */
		var divname = document.createElement("div");
		divname.setAttribute('id','name');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divphone=document.createElement("<div id='phone'>");
		@else */
		var divphone = document.createElement("div");
		divphone.setAttribute('id','phone');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divfax=document.createElement("<div id='fax'>");
		@else */
		var divfax = document.createElement("div");
		divfax.setAttribute('id','fax');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divaddress=document.createElement("<div id='address'>");
		@else */
		var divaddress = document.createElement("div");
		divaddress.setAttribute('id','address');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divcity=document.createElement("<div id='city'>");
		@else */
		var divcity = document.createElement("div");
		divcity.setAttribute('id','city');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divstate=document.createElement("<div id='state'>");
		@else */
		var divstate = document.createElement("div");
		divstate.setAttribute('id','state');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divzip=document.createElement("<div id='zip'>");
		@else */
		var divzip = document.createElement("div");
		divzip.setAttribute('id','zip');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divweb=document.createElement("<div id='web'>");
		@else */
		var divweb = document.createElement("div");
		divweb.setAttribute('id','web');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divemail=document.createElement("<div id='email'>");
		@else */
		var divemail = document.createElement("div");
		divemail.setAttribute('id','email');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var line=document.createElement("<hr id='spacer'>");
		@else */
		var line = document.createElement("hr");
		line.setAttribute('id','spacer');
		/* @end @*/
		
		var nameEntry = document.createTextNode(storeinfo[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
		var phoneEntry = document.createTextNode ("Phone: "+ storeinfo[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue);
		var faxEntry = document.createTextNode ("Fax: "+ storeinfo[i].getElementsByTagName("fax")[0].childNodes[0].nodeValue);
		var addressEntry = document.createTextNode (storeinfo[i].getElementsByTagName("address")[0].childNodes[0].nodeValue);
		var cityEntry = document.createTextNode (storeinfo[i].getElementsByTagName("city")[0].childNodes[0].nodeValue + ", "+storeinfo[i].getElementsByTagName("state")[0].childNodes[0].nodeValue);
		var stateEntry = document.createTextNode (storeinfo[i].getElementsByTagName("state")[0].childNodes[0].nodeValue);
		var zipEntry = document.createTextNode (storeinfo[i].getElementsByTagName("zip")[0].childNodes[0].textContent);
		var webEntry = document.createTextNode (storeinfo[i].getElementsByTagName("web")[0].childNodes[0].nodeValue);
		var emailEntry = document.createTextNode (storeinfo[i].getElementsByTagName("email")[0].childNodes[0].nodeValue);
		
		
		xmllist2.appendChild(divname);
		divname.appendChild(nameEntry);
		xmllist2.appendChild(divphone);
		divphone.appendChild(phoneEntry);
		xmllist2.appendChild(divfax);
		divfax.appendChild(faxEntry);
		xmllist2.appendChild(divaddress);
		divaddress.appendChild(addressEntry);
		xmllist2.appendChild(divcity);
		divcity.appendChild(cityEntry);
//		xmllist2.appendChild(divstate);
//		divstate.appendChild(stateEntry);
		xmllist2.appendChild(divzip);
		divzip.appendChild(zipEntry);
		xmllist2.appendChild(divweb);
		divweb.appendChild(webEntry);
		xmllist2.appendChild(divemail);
		divemail.appendChild(emailEntry);
		xmllist2.appendChild(line);
		
		
	}
	/*@cc_on @if(@_jscript)
	var newxmlList = xmllist2.innerHTML;
	distresults.innerHTML = newxmlList;
	@else */
	distresults.replaceChild(xmllist2,distresults.childNodes[0]);
	/* @end @*/
}



function listdiv4() {
	var headID = document.getElementsByTagName("head")[0];
	/*@cc_on @if(@_jscript)
	var cssNode=document.createElement("<link type='text/css' rel='stylesheet' href='form_test.css'>");
	@else */
	var cssNode = document.createElement("link");
	cssNode.setAttribute('type','text/css');
	cssNode.setAttribute('rel','stylesheet');
	cssNode.setAttribute('href','form_test.css');
	/* @end @*/
	headID.appendChild(cssNode);
	/*@cc_on @if(@_jscript)
	var distinfo= xmlHttp.getElementsByTagName("distributor");
	@else */
	var distinfo = xmlDoc.getElementsByTagName("distributor");
	/* @end @*/
	/*@cc_on @if(@_jscript)
	var xmllist=document.createElement("<div id='xmllist'>");
	@else */
	var xmllist = document.createElement("div");
	xmllist.setAttribute('id','xmllist');
	/* @end @*/
	var distresults = document.getElementById("finallist2");
	document.getElementById('header_two').innerHTML = "Complete Listing of Neuma Distributors";
for (i=0; i<distinfo.length; i++) {
	/*@cc_on @if(@_jscript)
		var divname2=document.createElement("<div id='name2'>");
		@else */
		var divname2 = document.createElement("div");
		divname2.setAttribute('id','name2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divphone2=document.createElement("<div id='phone2'>");
		@else */
		var divphone2 = document.createElement("div");
		divphone2.setAttribute('id','phone2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divfax2=document.createElement("<div id='fax2'>");
		@else */
		var divfax2 = document.createElement("div");
		divfax2.setAttribute('id','fax2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divaddress2=document.createElement("<div id='address2'>");
		@else */
		var divaddress2 = document.createElement("div");
		divaddress2.setAttribute('id','address2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divcity2=document.createElement("<div id='city2'>");
		@else */
		var divcity2 = document.createElement("div");
		divcity2.setAttribute('id','city2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divstate2=document.createElement("<div id='state2'>");
		@else */
		var divstate2 = document.createElement("div");
		divstate2.setAttribute('id','state2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var divzip2=document.createElement("<div id='zip2'>");
		@else */
		var divzip2 = document.createElement("div");
		divzip2.setAttribute('id','zip2');
		/* @end @*/
		/*@cc_on @if(@_jscript)
		var line2=document.createElement("<hr id='spacer2'>");
		@else */
		var line2 = document.createElement("hr");
		line2.setAttribute('id','spacer2');
		/* @end @*/
		
		var nameEntry = document.createTextNode(distinfo[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
		var phoneEntry = document.createTextNode ("Phone: "+ distinfo[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue);
		var faxEntry = document.createTextNode ("Fax: "+ distinfo[i].getElementsByTagName("fax")[0].childNodes[0].nodeValue);
		var addressEntry = document.createTextNode (distinfo[i].getElementsByTagName("address")[0].childNodes[0].nodeValue);
		var cityEntry = document.createTextNode (distinfo[i].getElementsByTagName("city")[0].childNodes[0].nodeValue + ", "+distinfo[i].getElementsByTagName("state")[0].childNodes[0].nodeValue);
		var stateEntry = document.createTextNode (distinfo[i].getElementsByTagName("state")[0].childNodes[0].nodeValue);
		var zipEntry = document.createTextNode (distinfo[i].getElementsByTagName("zip")[0].childNodes[0].nodeValue);
		var blankText = document.createTextNode (" ");
		
		xmllist.appendChild(divname2);
		divname2.appendChild(nameEntry);
		xmllist.appendChild(divphone2);
		divphone2.appendChild(phoneEntry);
		xmllist.appendChild(divfax2);
		divfax2.appendChild(faxEntry);
		xmllist.appendChild(divaddress2);
		divaddress2.appendChild(addressEntry);
		xmllist.appendChild(divcity2);
		divcity2.appendChild(cityEntry);
//		xmllist.appendChild(divstate2);
//		divstate2.appendChild(stateEntry);
		xmllist.appendChild(divzip2);
		divzip2.appendChild(zipEntry);
		xmllist.appendChild(line2);
		
		
	}
	/*@cc_on @if(@_jscript)
	var newxmlList = xmllist.innerHTML;
	distresults.innerHTML = newxmlList;
	@else */
	distresults.replaceChild(xmllist,distresults.childNodes[0]);
	/* @end @*/
}

Once again - using the IE hacks to make sure it would work in most browsers. I found if I didnt the results would not display in IE.

Here is a snippet of the xml code

<distributor>
		<name>OrePac Building Products</name>
		<info>distributor</info>
		<address>15120 E. Euclid Ave.</address>
		<city>Spokane</city>
		<state>WA</state>
		<zip>99216</zip>
		<phone>509-892-5555</phone>
		<fax>509-892-5550</fax>
	</distributor>
	<distributor>
		<name>OrePac Building Products</name>
		<info>distributor</info>
		<address>9213 51st Avenue Southwest</address>
		<city>Tacoma</city>
		<state>WA</state>
		<zip>98499</zip>
		<phone>253-582-9500 / 800-767-3719</phone>
		<fax>.</fax>
	</distributor>
	<store>
		<name>Brown Lumber and Building Supply, Inc</name>
		<info>dealer</info>
		<address>21891 Hwy. 25 Bypass</address>
		<city>Columbiana</city>
		<state>AL</state>
		<zip>35051</zip>
		<phone>205-669-6715</phone>
		<fax>205-669-6754</fax>
		<web>www.brownlumberco.net</web>
		<email>[e-mail]</email>
	</store>	
	<store>
		<name>Russell Building Supply	</name>
		<info>dealer</info>
		<address>350 Fulton Street</address>
		<city>Dadeville</city>
		<state>AL</state>
		<zip>36853</zip>
		<phone>256-825-4256</phone>
		<fax>256-825-6713</fax>
		<web>.</web>
		<email>.</email>
	</store>

I wanted to keep all the contact information for dealers/distributors in one file - so I designated which one was what type of contact using the <distributor> or the <store> tags.

Below is the HTML used to display the information

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="form_test.css">
<script type="text/javascript" src="find_sellers2.js"></script>
<title>Distributor Listings</title>
</head>
<body>

<div class="distlisting" id="listings">
	<form id="one">
	<input type="button" id="distOne" value="Distributors" onClick="listdiv4();" />
	<input type="button" id="dealOne" value="Dealers" onClick="listdiv5();" />
	</form>
</div>

	
	<div id="header_two">Find a dealer or distributor.</div>
	<div id="finallist2">
	</div>


</body>
</html>

Hope this is somewhat helpful - at least for importing and displaying the xml