CODEWITHSUNDEEP
jqueryhtmlxml
Andrea Turri
Andrea Turri

Reputation: 6500

jQuery menu with XML

To be honest I didn't still used XML with jQuery.

I have a little XML (below):

<folder title="Home">
  <item title="Welcome" />
  <folder title="My Photos">
    <folder title="Holidy">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
      <item title="Photo 5" />
    </folder>
    <folder title="Christmas">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
      <item title="Photo 5" />
      <item title="Photo 6" />
      <item title="Photo 7" />
      <item title="Photo 8" />
    </folder>
    <folder title="Zoo">
      <item title="Photo 1" />
      <item title="Photo 2" />
      <item title="Photo 3" />
      <item title="Photo 4" />
    </folder>
  </folder>
  <folder title="My Videos">
    <item title="Movie 1" />
    <item title="Movie 2" />
    <item title="Movie 3" />
    <item title="Movie 4" />
    <item title="Movie 5" />
    <item title="Movie 6" />
    <item title="Movie 7" />
    <item title="Movie 8" />
  </folder>
  <folder title="My Audio">
    <folder title="Artist 1">
      <folder title="Album 1">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
      </folder>
      <folder title="Album 2">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
        <item title="Track 8" />
      </folder>
    </folder>
    <folder title="Artist 2">
      <folder title="Album 1">
        <item title="Track 1" />
        <item title="Track 2" />
        <item title="Track 3" />
        <item title="Track 4" />
        <item title="Track 5" />
        <item title="Track 6" />
        <item title="Track 7" />
      </folder>
    </folder>
    <folder title="Podcasts">
      <item title="Track 1" />
      <item title="Track 2" />
      <item title="Track 3" />
      <item title="Track 4" />
      <item title="Track 5" />
      <item title="Track 6" />
      <item title="Track 7" />
      <item title="Track 8" />
    </folder>
  </folder>
</folder>

and I want to populate the html in this order (below):

<div class="entry">
   <p><span class="links">Sub-directory</span></p>
   <p><span class="files">File One</span></p>
   <p><span class="files">File Two</span></p>
   <p><span class="files">File Three</span></p>
   <p><spanclass="files">FileFour</span></p>
   <p><spanclass="files">FileFive</span></p>
   <p><span class="files">File Six</span></p>
</div>

and I want to navigate inside... I have understand how to load the XML but I didn't understand how to put inside the span TAG the title text. And when naveigate into "My Photos"... how to see the child contents...

Thanks in advance for the help.

EDIT:

Here the jQuery (below):

$.ajax({
        type: "GET",
        url: "content.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find('Home').children().each(function () {

                var title_text = $(this).attr('title');
                var spanFiles = $('span.files');

                spanFiles
                    .html(title_text)
                    .appendTo('div.entry');

            });
        }
    });

but doesn't work...

Upvotes: 0

Views: 1864

Answers (1)

tbleckert
tbleckert

Reputation: 3801

Just use xml as datatype with the load function, as I think was the road you walked. Then you must loop your top folder. But first, your xml should be like this:

<folders>
    <folder>
        <subfolder>
            <item></item>
        </subfolder>
    </folder>
</folders>

And why are you using title? You should use: Text

Then use each to loop your folders:

$(xml).find('folder').each(function() {
});

And in there you can check if there's a subfolder:

if($(this).find('subfolder').length > 0) { //loop the items from the subfolder }

And to get the text from an item simply:

$(this).find('item').text();

Start with this and you'll be fine and get back here if you're failing. And remember to say what's not working rather than not working...

EDIT: And in your code you're replacing the contents of that span over and over again. EDIT2: This is how you should append your items:

var text = $(this).find('item').text(),
    $span = $(document.createElement('span')).addClass('files');

$span.html(text).appendTo('div.entry');

Upvotes: 1

Related Questions