Back To Programming / Scripting / Coding Forum

jquery pros, I need help with .ajax()

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

Post December 5th, 2009, 1:13 pm

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?
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 5th, 2009, 1:13 pm

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

Post December 7th, 2009, 3:21 pm

wow, not a soul huh? ECHO Echo echo.... :)
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, 11:55 am

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.  
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:34 am

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.
I'd love to change the world, but they won't give me the source code.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post December 10th, 2009, 11:05 am

good to see you back in the game, looks as though you're the soul knowledge-base on the forum for jquery. :)
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 154 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
 
cron
 

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