• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

Need help with displaying XML data on webpage

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
shogun5
Asked:
shogun5
  • 3
  • 2
1 Solution
 
shogun5Author Commented:
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
 
Michel PlungjanIT ExpertCommented:
Did you try?
0
 
shogun5Author Commented:
Yes. Data is not showing...
0
 
Michel PlungjanIT ExpertCommented:
Any errors in the console? Can you make a jsfiddle.net or give a URL?
0
 
shogun5Author Commented:
Okay...I can work with this...thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now