Insert XML file into HTML

Question

Spycat 0 Light Poster

15 Years Ago

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:

Here is the page I would like to insert it into:

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:

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

html-css web-design xml

2 Contributors
2 Replies
1K Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by macgurl70

Dani AI

Generated 11 Months Ago

the reason your SSI include shows the XML but ignores its <?xml-stylesheet ...?> is that the xml-stylesheet processing instruction associates a stylesheet with the XML document itself. Browsers honor it when the XML is the top-level document, not when it is injected into an HTML page. In other words, include turns it into data, so the PI is not applied. Transform the XML into HTML and style the HTML in info.html instead. W3C xml-stylesheet recommendation.

A small, modern client-side approach (no database) looks like this. It fetches rankings.xml, parses it, and renders a table below your date. It is generic, so it does not assume tag names; it builds columns from the first item.

<div id="rankingsMount"></div>
<script>
(async () => {
  const res = await fetch('rankings.xml');
  const xml = new DOMParser().parseFromString(await res.text(), 'application/xml');

  const items = Array.from(xml.documentElement.children);
  if (!items.length) return;

  const cols = Array.from(items[0].children).map(el => el.tagName);
  const thead = cols.map(c => `<th>${c}</th>`).join('');
  const tbody = items.map(item =>
    `<tr>${cols.map(c => `<td>${(item.querySelector(c)||{}).textContent || ''}</td>`).join('')}</tr>`
  ).join('');

  document.getElementById('rankingsMount').innerHTML =
    `<table class="rankings"><thead><tr>${thead}</tr></thead><tbody>${tbody}</tbody></table>`;
})();
</script>

This uses the Fetch API and DOMParser, so no IE-only hacks are needed today (unlike the older XHR/ActiveX approach used). See MDN for Fetch and DOMParser.parseFromString. If rankings.xml ever lives on another domain, enable CORS or proxy it server-side due to the same-origin policy. MDN same-origin policy.

Prefer server-side? A light option is PHP’s XSL extension: load XML + XSL, output HTML, then include that fragment. PHP XSL manual. For client-side XSLT, XSLTProcessor works similarly. MDN XSLTProcessor.

All 2 Replies

macgurl70 9 Junior Poster

15 Years Ago

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

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>andrew@brownlumberco.net</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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Spycat 0 Light Poster · Answer 1 · 2010-10-04T21:31:05+00:00

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:
"

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"?>

Insert XML file into HTML

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers