Jquery AJAX Challenge: Test your might

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 865

Post 3+ Months Ago

So I've got an xml file structure like this:

XML Code: [ Select ]
<category name="wedding">
<subcategory name="Desmond">
<link thumb="path/to/thumb.jpg"></link>
  1. <category name="wedding">
  2. <subcategory name="Desmond">
  3. <link thumb="path/to/thumb.jpg"></link>
  4. </subcategory>
  5. </category>

This is an abridged version. The full version will have dynamically populated xml tags. There will only be one wedding category. There will be multiple subcategories. And there will be multiple links within each subcategory.

I'm able to pull in the xml file with the jquery ajax call.
I also have an HTML file structured like so:

HTML Code: [ Select ]
<div id="sidebar">
  1. <div id="sidebar">
  3. </div>

Fairly straightforward.

I want to populate the sidebar div with a list of links associated with the above XML nodes. So the resulting html would look like this after the ajax call:

HTML Code: [ Select ]
<div id="sidebar">
<li><img src="path/to/thumb.jpg" /></li>
  1. <div id="sidebar">
  3. <h2>Weddings</h2>
  5. <ul>
  6. <li><h3>Desmond</h3></li>
  7. <li><img src="path/to/thumb.jpg" /></li>
  8. </ul>

Where for each subcategory, there is a new unordered list created whose first list item is a level 3 header containing the text from the name attribute of the associated xml 'subcategory' node. Following this list item, each child node of that subcategory('link') is populated as a list item.

I've tried for about a week now to get this done but I end up getting lost in the traversal of the XML every time. Any of you guys able to pull it off?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8489
  • Loc: USA

Post 3+ Months Ago

Would be easy with php, but I don't have a working pc right now (using an iphone) so I can't help you yet.

Just posting this to ask, why Ajax? Does it need to be Ajax?
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 865

Post 3+ Months Ago

The reason I wanted it to be ajax is because I will only want to load certain parts of the xml file on certain events. I have a navigation bar with each major category as a link. So when a person clicks on "Weddings" in the navigation bar, the sidebar div is emptied of it's contents and the "Weddings" Category is laoded loaded into the sidebar. However, if this can be done with PHP in an easier fashion than ajax, feel free to share. The xml file will be written with PHP so I might as well do all the heavy work with PHP.

I'd say if it's php, than each main category needs to produce a seperate page that I can load into my sidebar div when the user clicks.

You see, there are several major category:
Weddings, Portraiture, Fine Art, Photojournalism, Nature, Creative, and Print.

There will only be one xml node for each of these categories. However, each of these categories will hold several subcategories that will be generated by a cms I'm writing.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 865

Post 3+ Months Ago

Okay, since no one seems up to the challenge, here's the answer. The reason it was so confusing for me is because it seems like a lot of functions within functions. Here it is:

JAVASCRIPT Code: [ Select ]
    url: "js/cats.xml",
   type: 'GET',
   dataType: 'xml',
   timeout: 1000,
   error: function(){
      alert('not loaded');
   },//end error
    success: function(xml) {
$(xml).find('category[name="weddings"]').each( function() {
var sidebar = $('#sidebar')
sidebar.slideUp(300, function() {
$(xml).find('category[name="weddings"]').children('subcategory').each( function() {
sidebar.append('<ul class="cat"><li><h3>' + $(this).attr('name') + '</h3></li></ul>');
$(this).children('link').each( function() {
sidebar.children('ul').last().append('<li><a rel="' + $(this).attr('href') + '"><img src="' + $(this).text()  + '" /></a></li>');
  1. $.ajax({
  3.     url: "js/cats.xml",
  4.    type: 'GET',
  5.    dataType: 'xml',
  6.    timeout: 1000,
  7.    error: function(){
  8.       alert('not loaded');
  9.    },//end error
  10.     success: function(xml) {
  12. $(xml).find('category[name="weddings"]').each( function() {
  13. var sidebar = $('#sidebar')
  15. sidebar.slideUp(300, function() {
  16. $(this).empty();
  17. $(xml).find('category[name="weddings"]').children('subcategory').each( function() {
  18. sidebar.append('<ul class="cat"><li><h3>' + $(this).attr('name') + '</h3></li></ul>');
  19. $(this).children('link').each( function() {
  20. sidebar.children('ul').last().append('<li><a rel="' + $(this).attr('href') + '"><img src="' + $(this).text()  + '" /></a></li>');
  21. });
  22. });
  23. });
  24. });
  25. }
  26. });

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 26 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-2017. Ozzu® is a registered trademark of Unmelted, LLC.