Solved

Need help with displaying XML data on webpage

Posted on 2013-06-27
5
267 Views
Last Modified: 2013-09-03
Dear Experts,

I am new to XML and XLST but am trying to figure out to display data on my webpage.

Here is the what the html looks like:

Just using fillers for now....

        
<ul class="column">
  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee 101</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">All About Beans</a></h2> 
          <p>Morbi congue auctor interdum. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Compatible Foods</a></h2> 
          <p>Phasellus sit amet metus justo. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Sizzle</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Morbi congue auctor interdum. Curabitur in odio augue. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Tools of the Trade</a></h2> 
          <p>Curabitur in odio augue. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">The Art of Making Coffee</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Phasellus sit amet metus justo. Curabitur in odio augue. Morbi congue auctor interdum.  </p> 
      </section>
  </li>

  <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Style</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>
          <!--eqblock-->
  <li>
      <section class="block">
        <a href="#"><img src="../images/folder-file.jpg" alt=""  /></a> 
          <h2><a href="#">Coffee Style</a></h2> 
          <p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p> 
      </section>
  </li>

Open in new window


What I would like to do is to extract the value for the bullet tags above from an XML file. One image and two txt (header) and (body). This is what I have so far for my XML file:

<?xml version="1.0" encoding="ISO-8859-1"?>
<daresource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading>6+1 Traits </heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is another great site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is one more wonderful site to get resources.</blurb>
 </resource>
 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage<a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

 <resource category="ela">
   <daimage><a href="www.resourcelink.com"><img src="../images/folder-file.jpg"></a></daimage>
   <heading><a href="www.resourcelink.com">6+1 Traits</a></heading>
   <blurb>This is a great site to get resources.</blurb>
 </resource>

</daresource>

Open in new window


I was reading where someone did not recommend child attributes so need your recommendation whether to use  <resource category="ela"> or some other tag. The idea is that these are online resources for ELA (english language arts). The image and the header need to be clickable and go to the resource. I don't know how I would do that.

Using this javascript:
<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.getElementById("image").innerHTML=
xmlDoc.getElementsByTagName("daimage")[0].childNodes[0].nodeValue;
document.getElementById("heading").innerHTML=
xmlDoc.getElementsByTagName("heading")[0].childNodes[0].nodeValue;
document.getElementById("blurb").innerHTML=
xmlDoc.getElementsByTagName("blurb")[0].childNodes[0].nodeValue;
</script>

Open in new window



Would my new line in the HTML document look like this?

 <!--eqblock-->
  <li>
      <section class="block"><span id="image"></span> /></a> 
          <h2><span id="image"></span></h2> 
          <p><span id="blurb"></span></> </p> 
      </section>
  </li>

Open in new window


Thanks in advance. I really need someone with XML expertise to look over this code and provide suggestions or help to get this to work.
0
Comment
Question by:shogun5
  • 3
  • 2
5 Comments
 

Author Comment

by:shogun5
Comment Utility
Sorry all the coding did not show.

Current HTML:


 <!--eqblock-->
<li>
 <section class="block">
<a href="#"><img src="../images/folder-file.jpg" alt=""  /></a>
<h2><a href="#">Coffee 101</a></h2>
<p>Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. </p>
   </li>

With XML pull:

<!--eqblock-->
<li>
<section class="block"><span id="image"></span> /></a>
<h2><span id="image"></span></h2>
<p><span id="blurb"></span></> </p>
  </section>
 </li>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Did you try?
0
 

Author Comment

by:shogun5
Comment Utility
Yes. Data is not showing...
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Any errors in the console? Can you make a jsfiddle.net or give a URL?
0
 

Author Closing Comment

by:shogun5
Comment Utility
Okay...I can work with this...thanks!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

7 Experts available now in Live!

Get 1:1 Help Now