Loading XML into HTML

JavaScript
1

Hello,

On the following page:

http://www.alexanderlloyd.info/sennheiser/auriculares_.html

I would like to load in content from an xml file, when the user clicks on one of the products from the sidemenu. The content will be an image and text for each type of headphone. I’ve been looking into it and I thought the best way would be to have 1 XML with all the content for each type instead of having one XML or one HTML for each type.

Only problem is, I’m a noob and I’m not sure how I could program this or if it is possible.

Could anyone lend a hand? I’m thinking I could adapt the following code for this task:

$(document).ready(function() {
  $('#letter-d a').click(function() {
    $.get('d.xml', function(data) {
      $('#dictionary').empty();
      $(data).find('entry:has(quote[author])').each(function() {
        var $entry = $(this);
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
        html += '<div class="part">' + $entry.attr('part') + '</div>';
        html += '<div class="definition">';
        html += $entry.find('definition').text();
        var $quote = $entry.find('quote');
        if ($quote.length) {
          html += '<div class="quote">';
          $quote.find('line').each(function() {
            html += '<div class="quote-line">' + $(this).text() + '</div>';
          });
          if ($quote.attr('author')) {
            html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append($(html));
      });
    });
    return false;
  });
});

The XML would look similar to this:

<?xml version="1.0" encoding="ISO-8859-1"?>
 - <auriculares>
 			<type>
       	<name>CX 300</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/cx300.png" alt="Sennheiser Headphones CX 300"/></image>
   		</type>
   		<type>
       	<name>MX 85</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/mx85.png" alt="Sennheiser Headphones MX 85"/></image>
   		</type>
   		<type>
       	<name>MX 560</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/mx560.png" alt="Sennheiser Headphones MX560"/></image>
   		</type>
   		<type>
       	<name>PMX 80</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/pmx80.png" alt="Sennheiser Headphones PMX 80"/></image>
   		</type>
   		<type>
       	<name>HD 212</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/hd212.png" alt="Sennheiser Headphones HD 212"/></image>
   		</type>
   		<type>
       	<name>HD 515</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/hd515.png" alt="Sennheiser Headphones HD 515"/></image>
   		</type>
   		<type>
       	<name>HD 2280</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/hd2280.png" alt="Sennheiser Headphones HD 2280"/></image>
   		</type>
   		<type>
       	<name>HD 435</name>
       	<description>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus varius magna. Pellentesque quis quam ut mauris viverra hendrerit. </description>
       	<image><img class="img_auricular" src="img/hd435.png" alt="Sennheiser Headphones HD 435"/></image>
   		</type>
   </auriculares>

Thanks very much for your help!

2

Hi Chulo,

You’re on the right track. The code fragment you have found downloads an XML file, finds each of the entries in that file, and builds up a string of HTML code, which it then inserts into an existing element of the page.

I’d say you haven’t gotten any answers to your post yet because nobody feels like re-writing the whole thing for you. Maybe if you let us know what was confusing you about the code you found we could help you with that specific point of confusion?

3

Hi Kevin,

Thanks for your reply and btw your books are great! I’m stuck on starting off, I’m not sure how to associate the click of one of the models with the correct model in the XML. In other words, in the JS how do I select the content for CX 300 if they click on this model, I just need a little orientation please!

Thanks !