1 Replies - 3127 Views - Last Post: 10 December 2010 - 05:58 PM

#1 hawkoftheeye  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 08-September 10

Find next sibling element in XML with jQuery

Posted 10 December 2010 - 03:42 PM

Good evening jQuery gurus!!

I was hoping that someone could offer some insight into a problem I have been trying to solve for a website I am creating for a university project?

The assignment revolves around the classic bookstore scenario. I have two XML files, one containing the data about the books, and another containing the data about the categories - a sample of which is included below:

<categories>
  <category>
    <longname>Programming</longname>
    <subcategory>
      <subshort>web</subshort>
      <sublong>Web Development</sublong>
    </subcategory>
    <subcategory>
      <subshort>cpp</subshort>
      <sublong>C++ Development</sublong>
    </subcategory>
  </category>
</categories>



The idea is that when a book category is clicked from a menu on the left of my site, the width of a div I have containing the name of the book category (lets call it "catTitle") animates down to next to nothing with jQuery. The category name should then be retrieved from the XML file, and the "catTitle" div animated back up to full size and the text within the div should be changed to the text of the new category. After this has occured the relevant book information is retrieved via a PHP script and displayed within an output div ("xmlMain") with jQuery.

The links within my menu are dynamically created using PHP, and all have ID's generated from the <subshort> element of the XML.

What I want to happen is make the text of my "catTitle" div change to match the contents of the <sublong> element - which is the sibling of <subshort>.

The jQuery I have is thus:

$(document).ready(function() {  
   $(".sideCol a").click(function(event) {
      //Prevent the usual behaviour of the link
      event.preventDefault();
      $("#catTitle").animate({width: "30px"} , 500, function() {
          $(".xmlMain").fadeOut(500, function() {
              //Finished fading out
              $("#catTitle").html('test');  //This should get changed to whatever the book <sublong> is...but how?
              $("#catTitle").animate({width: "300px"}, 500, function() {
                       $(".xmlMain").load('ajaxrequest.php', {"c":event.target.id} , function() {
                          //finished loading
                          $(".xmlMain").fadeIn(500);
                       });
                 });
            });
          }
        );
    });   
}); 



A working demo of this can be found at http://madspider.co....o1/testajax.php - click a link on the left to trigger the jQuery. You will see how the "catTitle" div animates down then back up with the test text I have placed in it.

I can provide any of my other code if anyone requires it.

Any help anyone could provide on this would be most appreciated, and would be worthy of a beer on me if you are (un)lucky enough to live in Nottingham.

Many thanks,

Richard

Is This A Good Question/Topic? 0
  • +

Replies To: Find next sibling element in XML with jQuery

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4332
  • View blog
  • Posts: 12,127
  • Joined: 18-April 07

Re: Find next sibling element in XML with jQuery

Posted 10 December 2010 - 05:58 PM

Why not when you generate the menu with PHP, make each link's id the value of <sublong> and continue to pass the <subshort> as a parameter in the url? Then when you click the link, it reads the id attribute (using .attr in jQuery) to then set catTitle.

$(".sideCol a").click(function(event) {
   var title = $(this).attr("id");
   ....
   $("#catTitle").html(title);
}



I am not sure why your id attribute has to be the same value as what is passed in the links href. If you are not sure how to get the <sublong> from the XML into the id attribute through PHP, open up a topic in the PHP forum and show us how you are parsing the XML to generate the menu. If you are using SimpleXml you will probably be able to reach it by looping through $xmldoc->category->subcategory elements and for each one selecting sublong child by $category->sublong. That or you can use the SimpleXml xpath() method.

Hope you get what I am saying here. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1