Back To Programming / Scripting / Coding Forum

array from xml item

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 7th, 2009, 6:33 pm

I need to create an array of items. the array should contain the same number of items as my xml file holds "image" tags. Then, I need jquery to create an <li></li> and append it to an already established <ul></ul> in my html for each item in my array. here's my codes, abridged:

HTML Code: [ Select ]
<div id="webthumbcontainer">
     <ul id="webthumblist">
 
     </ul>
</div>
 
  1. <div id="webthumbcontainer">
  2.      <ul id="webthumblist">
  3.  
  4.      </ul>
  5. </div>
  6.  


XML Code: [ Select ]
<category id="web">
      <image>
         <link>tadesign/images/carcare.jpg</link>
         <description>Description text goes here about carcaredetail</description>
      </image>
      <image>
         <link>tadesign/images/monster.jpg</link>
         <description>Description text goes here about monster resolution</description>
      </image>
      <image>
         <link>tadesign/images/rantingbill.jpg</link>
         <description>Description text goes here about rantingbill</description>
      </image>
      <image>
         <link>tadesign/images/voltecsite.jpg</link>
         <description>Description text goes here about voltec design</description>
      </image>
</category>
 
  1. <category id="web">
  2.       <image>
  3.          <link>tadesign/images/carcare.jpg</link>
  4.          <description>Description text goes here about carcaredetail</description>
  5.       </image>
  6.       <image>
  7.          <link>tadesign/images/monster.jpg</link>
  8.          <description>Description text goes here about monster resolution</description>
  9.       </image>
  10.       <image>
  11.          <link>tadesign/images/rantingbill.jpg</link>
  12.          <description>Description text goes here about rantingbill</description>
  13.       </image>
  14.       <image>
  15.          <link>tadesign/images/voltecsite.jpg</link>
  16.          <description>Description text goes here about voltec design</description>
  17.       </image>
  18. </category>
  19.  


JAVASCRIPT Code: [ Select ]
$.ajax({
url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
 
 
success: function()
   {
   
   $(this).find('label').each(function(){
                         var blocks = $(xml).makeArray($(this).each('images'));
 
                         $('<li><a href="#"></a></li>')
                             .html(blocks).each()
                             .appendTo('#webthumblist');
       });
   
       }
   
});
 
  1. $.ajax({
  2. url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  3.  
  4.  
  5. success: function()
  6.    {
  7.    
  8.    $(this).find('label').each(function(){
  9.                          var blocks = $(xml).makeArray($(this).each('images'));
  10.  
  11.                          $('<li><a href="#"></a></li>')
  12.                              .html(blocks).each()
  13.                              .appendTo('#webthumblist');
  14.        });
  15.    
  16.        }
  17.    
  18. });
  19.  


I'm trying my best here but I just don't know enough about xml, javascript, jquery, or ajax to get this done by myself. I've been researching like a madman but I'd appreciate your guys' input.

Essentially, I should get 4 objects in my array. I should also have 4 <li> in my <ul id="webthumblist">.
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 7th, 2009, 6:33 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 8th, 2009, 11:57 am

looks like I was close, here's what someone on another forum gave me:

JAVASCRIPT Code: [ Select ]
$.ajax({
url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
 
 
success: function(xml)
   {
   
   $(xml).find('#web image').each(function(){
                     $("#webthumblist").append("<li><a href=\"#\" id=\"" + $(xml).find('#web image').index(this) + '></a></li>');
                  });
};
});
 
  1. $.ajax({
  2. url: "js/img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  3.  
  4.  
  5. success: function(xml)
  6.    {
  7.    
  8.    $(xml).find('#web image').each(function(){
  9.                      $("#webthumblist").append("<li><a href=\"#\" id=\"" + $(xml).find('#web image').index(this) + '></a></li>');
  10.                   });
  11. };
  12. });
  13.  
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 8th, 2009, 12:09 pm

here's a question, my javascript is running over the entire array instead of each item. Not sure why.

example


Look at the paragraphs, they're all generated based on the xml ajax call. here's the jquery for the generated paragraph content:

JAVASCRIPT Code: [ Select ]
$(xml).find('#web description').each(function(){
         var desc = $(xml).find('#web description').text();
                     $("#textcontainer").append('<p>' + desc + '</p');
   });
 
  1. $(xml).find('#web description').each(function(){
  2.          var desc = $(xml).find('#web description').text();
  3.                      $("#textcontainer").append('<p>' + desc + '</p');
  4.    });
  5.  


and here's my xml file
XML Code: [ Select ]
<root>
   <category id="web">
      <image></image>
      <link>tadesign/images/carcare.jpg</link>
      <description>Description text goes here about carcaredetail</description>
     
      <image></image>
      <link>tadesign/images/monster.jpg</link>
      <description>Description text goes here about monster resolution</description>
     
      <image></image>
      <link>tadesign/images/rantingbill.jpg</link>
      <description>Description text goes here about rantingbill</description>
     
      <image></image>
      <link>tadesign/images/voltecsite.jpg</link>
      <description>Description text goes here about voltec design</description>
     
   </category>
</root>
 
  1. <root>
  2.    <category id="web">
  3.       <image></image>
  4.       <link>tadesign/images/carcare.jpg</link>
  5.       <description>Description text goes here about carcaredetail</description>
  6.      
  7.       <image></image>
  8.       <link>tadesign/images/monster.jpg</link>
  9.       <description>Description text goes here about monster resolution</description>
  10.      
  11.       <image></image>
  12.       <link>tadesign/images/rantingbill.jpg</link>
  13.       <description>Description text goes here about rantingbill</description>
  14.      
  15.       <image></image>
  16.       <link>tadesign/images/voltecsite.jpg</link>
  17.       <description>Description text goes here about voltec design</description>
  18.      
  19.    </category>
  20. </root>
  21.  
Use your words like arrows to shoot toward your goal.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post December 9th, 2009, 6:50 am

You don't need the semicolon closing the success param and you need to simplify/rework your bit inside find().each() to avoid putting every desc. in once for every entry you have (and close your </p> tag). Try like this:

Code: [ Select ]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>

<div id="textcontainer">
Some text here
</div>

<script language="javascript">
$.ajax({
    url: "img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
    success: function(xml) {
        $(xml).find('#web description').each(function(){
            $("#textcontainer").append('<p>' + $(this).text() + '</p>');
        });
    }
});
</script>
</body>
</html>
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  4. </head>
  5. <body>
  7. <div id="textcontainer">
  8. Some text here
  9. </div>
  11. <script language="javascript">
  12. $.ajax({
  13.     url: "img.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  14.     success: function(xml) {
  15.         $(xml).find('#web description').each(function(){
  16.             $("#textcontainer").append('<p>' + $(this).text() + '</p>');
  17.         });
  18.     }
  19. });
  20. </script>
  21. </body>
  22. </html>


(My img.xml was identical to yours given in your last example)
I'd love to change the world, but they won't give me the source code.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 144 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.