SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <?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

    Code:
    <!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

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

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code 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);
            })
          })
        })

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [I tried your code but it's still not working]
    for what ?

    now if I click on the button I get this mark up
    Code HTML4Strict:
    <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.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    383
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's quite the same
    Code HTML4Strict:
    <!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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •