Solved

Need help with displaying XML data on webpage

Posted on 2013-06-27
5
270 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
ID: 39283298
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
ID: 39285094
Did you try?
0
 

Author Comment

by:shogun5
ID: 39300926
Yes. Data is not showing...
0
 
LVL 75

Accepted Solution

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

Author Closing Comment

by:shogun5
ID: 39462187
Okay...I can work with this...thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
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…

777 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