AJAX, populating a dropdown menu from a XML file

Question

I am working on a project and I am not sure what to do next. My goal is to populate a dropdown-menu with a xml file. The menu is based on 4 steps. "Fylke" "Kommune" "Kategori" "Dato". Right now I get the xml to feed data to "Fylke" with the example under. The next step is to populate "Kommune" with Halden when the user choose Akershus from the "Fylke" menu.

Here is the XML:

<arrangement>
   <fylke name="Akershus">
   <kommune name="Halden">
   <arrangement id="570215856">
   <kategori>Moro</kategori>
   <dato>2013-10-10</dato>
</arrangement>

Here is the Script: (This is feeding "fylke" to the menu at the moment.)

 $(document).ready( function() {
arrangementer();
 fetch();
 });

 /*function fetch() {

 setTimeout( function() {
    arrangementer();
    fetch();
   }, 100);

   }*/

   function arrangementer() {

   $.ajax({ 

    url: "arrangementer.xml",
    dataType: "xml",
    success: function(data) {

        $('ul').children().remove();

        $(data).find("arrangement fylke").each( function() {

            var info = '<a href="#">'+$(this).attr("name")+'</a>';

            $('ul').append(info);

        });

    },
    error: function() { $('ul').children().remove(); 
        $('ul').append("<li>There was an error!</li>"); }
}); 
}

score 0 · Answer 1 · edited May 23 '17 at 11:57

are you using jquery?

if so you need to attach a click event to the outer ul, which can be done in the ready function

$( "ul li" ).click(function() {
  alert( "Handler for .click() called." );
});

http://api.jquery.com/click/

You are not adding li items into your ul currently jQuery: how to add <li> in an existing <ul>?

You really need to give ids to the elements you want to update so you can uses

$(" #myid li ").append(info);

Otherwise you will add info to all ul elements on your form http://api.jquery.com/id-selector/

homtg · Accepted Answer · 2013-11-08T12:32:06.517

0

not sure if i got your problem right, but hope this helps:

$(xml).find("arrangement fylke").each( function(i) {
    var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>'; //attribute nodeno added, carries the number of the node you will need later
    $('ul').append(info); 
});

$('ul').on("click", function(e){ //when clicked on one of those elements
    var nodeno = $(e.target).attr("nodeno"); //get nodeno attribute from clicked object
    $(xml)[nodeno].find("arrangement kommune").each( function(i){ //get the node by id and...
        var info = '<a href="#" nodeno="'+i+'" >'+$(this).attr("name")+'</a>';
        $('#menuitem2').append(info); //...populate your submenu with the kommune object
    } );
});

EDIT: a little explanation

this will result in fylke links like:

<a href="#" nodeno="0">Fylke 1</a>
<a href="#" nodeno="1">Fylke 2</a>

when one of them is clicked you just read the nodeno attribute from the clicked element and use that to get the corresponding node from your xml. then you only use kommune from that one node for populating the next menu level.

hope i got your problem right and this helps

edited Nov 08 '13 at 12:32

answered Nov 07 '13 at 20:39

homtg

1,999
1
15
20

Ok, thanks alot. But I am not sure where to put your example in my code? – user2926446 Nov 07 '13 at 20:51
I got you example to work, but i does the same as mine, when i click on a item inside "Fylke" nothing happens. – user2926446 Nov 07 '13 at 21:12
Now its kind of working, but only if i remove [nodeno] from the $(xml)[nodeno].find. And then it feeds all the "Kommune" names in the menu. Not the ones inside the fylke node in the xml. Firebug says that nodeno is not a function. I am confused. But almost there :) – user2926446 Nov 07 '13 at 21:55
maybe a little explanation helps: you need to reduce the xml you use as the basis for your second "find", so this was what the nodeno was intended to do. "$(xml)[nodeno].find(..." should seach only within the clicked nodeno of fylke for kommune. can you maybe attach a bit more of your xml with multiple fylke and commune nodes? – homtg Nov 08 '13 at 12:28
Thanks again. This really helped alot. The menu is now completed :) – user2926446 Nov 08 '13 at 23:23

AJAX, populating a dropdown menu from a XML file

2 Answers2