JQuery - Ajax load xml

Hi all

I’m trying to create a simple image gallery by loading images from an xml file

The xml file looks like this


<?xml version="1.0" encoding="UTF-8"?>
<images>
  <img>images/01_th.jpg</img>
  <img>images/02_th.jpg</img>
  <img>images/03_th.jpg</img>
  <img>images/04_th.jpg</img>
  <img>images/05_th.jpg</img>
  <img>images/06_th.jpg</img>
</images>

and here is my html/jquery


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	 body{font-family:sans-serif;font-weight:normal;}
	 .wrap{margin:50px;width:700px;}
	 /**/
	 button{margin:20px 0 5px 0;padding:5px;}
	 p{margin-bottom:10px;}
	 p span{color:red;}
	</style>
</head>

<body>
  <div class="wrap">
    <button id="btn">Load IMG</button>
    <div id="content">
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script type="text/javascript">

    $('#btn').click(function(){
      $.get('images.xml', function(data){
        $('#content').empty();
        $(data).find('img').each(function(){
          var $image = $(this);
          var html = '<div>';
          html += '<src="' + $image.text() + '" />'
          //html += '<p>img</p>'
          //html += '<p>' + $image.text() + '</p>';
          html += '</div>';
          $('#content').append($(html));
        })
      })
    })
  </script>
</body>
</html>

I’m trying to create a simple list of div’s like below


<div>
   <img = "images/01_th.jpg" />
</div>
<div>
   <img = "images/02_th.jpg" />
</div>


$('#btn').click(function(){
      $.get('images.xml', function(data){
        $('#content').empty();
        $(data).find('img').each(function(){
          var $image = $(this);
          var html = '<div>';
          html += '<img src="' + $image.text() + '" />';

          //html += '<p>img</p>'
          //html += '<p>' + $image.text() + '</p>';
          html += '</div>';
          $('#content').append(html);
        })
      })
    })

Thanks for the reply whisher

I see I missed the img from the img tag.

I tried your code but it’s still not working

[I tried your code but it’s still not working]
for what ?
:slight_smile:
now if I click on the button I get this mark up


<div id="content">
<div><img src="images/01_th.jpg"></div>
<div><img src="images/02_th.jpg"></div>
<div><img src="images/03_th.jpg"></div>
<div><img src="images/04_th.jpg"></div>
<div><img src="images/05_th.jpg"></div>
<div><img src="images/06_th.jpg"></div>
</div>

and aside of not standard xhtml for the img tag (the ending / jquery use innerHTML to implement html method) there isn’t nothing wrong.

If I click the button I get nothing

I no the the code isn’t standard - this is just for me to test

would you mind posting the full page because I still can’t get it to work.

It’s quite the same


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>untitled</title>
    <style type="text/css">
    *{margin:0;padding:0;}
     body{font-family:sans-serif;font-weight:normal;}
     .wrap{margin:50px;width:700px;}
     /**/
     button{margin:20px 0 5px 0;padding:5px;}
     p{margin-bottom:10px;}
     p span{color:red;}
    </style>
</head>

<body>
  <div class="wrap">
    <button id="btn">Load IMG</button>
    <div id="content">
    </div>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"type="text/javascript"></script>
  <script type="text/javascript">

    $('#btn').click(function(){
      $.get('images.xml', function(data){
        $('#content').empty();
        $(data).find('img').each(function(){
          var $image = $(this);
          var html = '<div>';
          html += '<img src="' + $image.text() + '" />';

          //html += '<p>img</p>'
          //html += '<p>' + $image.text() + '</p>';
          html += '</div>';
          $('#content').append(html);
        })
      })
    })
  </script>
</body>
</html>

logically you have to get the images in your path :slight_smile: