?
Solved

Need help with displaying XML data on webpage

Posted on 2013-06-27
5
Medium Priority
?
275 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
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…
Suggested Courses

765 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