jquery pros, I need help with .ajax()

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

SO I'm building my portfolio page, I figure it's about time as I've finally found my groove in design style. I've designed the webpage and built the html, but having some trouble on the ajax part. I'm sure this could be easier with a server-side language, but I figure it's a good time to learn ajax. Here's the relevant portion of my html:
HTML Code: [ Select ]
<div id="leftcolumn">
   
    <div id="webcontainer">
      <h1>Web Design</h1>
        <div id="webthumbcontainer">
        </div>
    </div>
   
    <div id="logocontainer">
      <h1>Business Identity</h1>
        <div id="logothumbcontainer">
        </div>
    </div>
   
    <div id="adcontainer">
      <h1>Advertisement Design</h1>
        <div id="adthumbcontainer">
        </div>
    </div>
   
    <div id="personalcontainer">
      <h1>Personal Art</h1>
        <div id="personalthumbcontainer">
        </div>
    </div>
</div>
 
<div id="centercolumn">
   
    <div id="imgcontainer">
  </div>
</div>
 
<div id="rightcolumn">
 
   <div id="textcontainer">
      <p>Description area
        </p>
    </div>
</div>
 
  1. <div id="leftcolumn">
  2.    
  3.     <div id="webcontainer">
  4.       <h1>Web Design</h1>
  5.         <div id="webthumbcontainer">
  6.         </div>
  7.     </div>
  8.    
  9.     <div id="logocontainer">
  10.       <h1>Business Identity</h1>
  11.         <div id="logothumbcontainer">
  12.         </div>
  13.     </div>
  14.    
  15.     <div id="adcontainer">
  16.       <h1>Advertisement Design</h1>
  17.         <div id="adthumbcontainer">
  18.         </div>
  19.     </div>
  20.    
  21.     <div id="personalcontainer">
  22.       <h1>Personal Art</h1>
  23.         <div id="personalthumbcontainer">
  24.         </div>
  25.     </div>
  26. </div>
  27.  
  28. <div id="centercolumn">
  29.    
  30.     <div id="imgcontainer">
  31.   </div>
  32. </div>
  33.  
  34. <div id="rightcolumn">
  35.  
  36.    <div id="textcontainer">
  37.       <p>Description area
  38.         </p>
  39.     </div>
  40. </div>
  41.  


As you can see, I want to split my work up into separate categories: web design, advertisement design, business identity, and personal art. I want a list of blocks to be generated in each category with the appropriate number of links corresponding to the number of art work. Here's my xml file, abridged:
XML Code: [ Select ]
<?xml version="1.0" encoding="UTF-8"?>
 
<images>
   <image>
      <category>web</category>
      <link>link/to/webimage.jpg</link>
      <description>description text</description>
   </image>
   <image>
      <category>ad</category>
      <link>link/to/advertisementimage.jpg</link>
      <description>description text</description>
   </image>
   <image>
      <category>bus</category>
      <link>link/to/identityimage.jpg</link>
      <description>description text</description>
   </image>
   <image>
      <category>personal</category>
      <link>link/to/personalimage.jpg</link>
      <description>description text</description>
   </image>
</images>
 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.  
  3. <images>
  4.    <image>
  5.       <category>web</category>
  6.       <link>link/to/webimage.jpg</link>
  7.       <description>description text</description>
  8.    </image>
  9.    <image>
  10.       <category>ad</category>
  11.       <link>link/to/advertisementimage.jpg</link>
  12.       <description>description text</description>
  13.    </image>
  14.    <image>
  15.       <category>bus</category>
  16.       <link>link/to/identityimage.jpg</link>
  17.       <description>description text</description>
  18.    </image>
  19.    <image>
  20.       <category>personal</category>
  21.       <link>link/to/personalimage.jpg</link>
  22.       <description>description text</description>
  23.    </image>
  24. </images>
  25.  


Where I'm having trouble:
  • I want dummy links to be generated in each category with the correct number of images defined in that category by my xml. In this case, it would be one dummy link per category. These links would be set in a generated <ul> under each <h1> tag in my html.
  • When the user clicks on the dummy link, the corresponding image from the xml will be loaded into the "imgcontainer" div tag.
  • At the same time, the description would be loaded as a paragraph in the "textcontainer" div.

The whole idea is that when I want to add new work, I simply add the image to the folder and edit the xml file.
Any ideas?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

wow, not a soul huh? ECHO Echo echo.... :)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

nevermind everyone, got it working. Here's most of the code if anyone's interested:

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>');
                  });
   $(xml).find('#web').each(function(){
         var source = $(xml).find('#web link').text();
                     $("#imagecontainer").append('<a href="#" id=\"' + $(xml).find('#web link').index(this) + '><img src="' + source + '" /></a>');
                  });
   $(xml).find('#web description').each(function(){
         var desc = $(xml).find('description').text();
                     $("#textcontainer").append('<p>' + desc + '</p');
                  });
 
   }
   
 
});
 
  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.    $(xml).find('#web').each(function(){
  12.          var source = $(xml).find('#web link').text();
  13.                      $("#imagecontainer").append('<a href="#" id=\"' + $(xml).find('#web link').index(this) + '><img src="' + source + '" /></a>');
  14.                   });
  15.    $(xml).find('#web description').each(function(){
  16.          var desc = $(xml).find('description').text();
  17.                      $("#textcontainer").append('<p>' + desc + '</p');
  18.                   });
  19.  
  20.    }
  21.    
  22.  
  23. });
  24.  
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Sorry I'm so late to the party - glad you found the solution, though. If you come across more jQuery issues, feel free to post them up as work's allowing just a tad bit more time for browsing recently, so I'm trying to get in here regularly again.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

good to see you back in the game, looks as though you're the soul knowledge-base on the forum for jquery. :)

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: ScottG, wpas and 92 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.