retrieve the value of all children from an xml node then apply a javascript function to each

Question

If i change the xml to:

<?xml version="1.0" encoding="ISO-8859-1"?>
<events>
<event>
    <date>
        <weekday>ven</weekday>
        <day>15</day>
        <month>feb</month>
    </date>
    <place>
        <name>Blue Sound</name>
        <city>Nola</city>
        <address>Corso Italia 7</address>
    </place>
    <band>
        <name>Random Jazz 6some</name>
        <link>http://randomjazz6.ran</link>
        <members>
            <drummer> Random Drummer </drummer>
            <vocal> Random Vocalist </vocal>
            <bass>Random Bassist</bass>
            <guitar>Random Guitar</guitar>
            <keys>Random keyboarder</keys>
            <other>Random otherist</other>
        </members>
    </band>
    <description>this is the event number 1, ven 15 feb</description>
</event>
<event>
    <date>
        <weekday>ven</weekday>
        <day>1</day>
        <month>mar</month>
    </date>
    <place>
        <name>Dada</name>
        <city>Chicago</city>
        <address>Random Street 7</address>
    </place>
    <band>
        <name>Random Jazz band 2</name>
        <link>http://randomjazzband2.ran</link>
        <members>
            <drummer> Random Drummer </drummer>
            <vocal> Random Vocalist </vocal>
            <bass>Random Bassist</bass>
            <guitar>Random Guitar</guitar>
            <keys>Random keyboarder</keys>
            <other>Random otherist</other>
        </members>
    </band>
    <description>this is the event number 2, ven 1 mar</description>
</event>
</events>

and the following javascript:

$(document).ready(function () {
    var day = xmlDoc.getElementsByTagName("day")[0].childNodes[0].nodeValue;
    var weekday = xmlDoc.getElementsByTagName("weekday")[0].childNodes[0].nodeValue;
    var month = xmlDoc.getElementsByTagName("month")[0].childNodes[0].nodeValue;
    var sideVoice = '<a class="date" onclick="showEv()">' + weekday + day + month + '</a>';
    document.getElementById("side_dates").innerHTML = sideVoice;
});

function showEv() {
    document.getElementById("event_content").innerHTML = xmlDoc.getElementsByTagName("description")[0].childNodes[0].nodeValue;
}

how do i add, for each <event> inside the XML, a rispective <a class="date" onclick="ShowEV()"> containing the child <date> and this <date> children's values </a> ?

You can see this on http://campaniajazz.altervista.org/#events

Try uncommenting the `
` so it can get selected by `document.getElementById()`? — Bergi, Feb 07 '13 at 23:50
what about grouping the children of the date tag? there will be different `` tags each of them with different children's values, i want to show all this children togheter by referring to their `` parent — zentili, Feb 07 '13 at 23:59
Do you have control over the xml? Then I would suggest changing it to `` — Bergi, Feb 08 '13 at 00:04

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

You should use jQuery for the event listeners. Also, you will need a closure to preserve the event in a variable.

var sideDates = $("#side_dates");
var events = xmlDoc.getElementsByTagName("event");
for (var i=0; i<events.length; i++) {
    var event = events[i];

    // you might use something better to get these variables:
    var day = event.getElementsByTagName("day")[0].childNodes[0].nodeValue,
        weekday = event.getElementsByTagName("weekday")[0].childNodes[0].nodeValue,
        month = event.getElementsByTagName("month")[0].childNodes[0].nodeValue,
        description = event.getElementsByTagName("description")[0].childNodes[0].nodeValue;

    var sideVoice = $('<a class="date">' + weekday + day + month + '</a>');
    sideVoice.on("click", makeShowFunction(description));
    sideDates.append(sideVoice);
}
function makeShowFunction(texttoshow) {
     // this closure preserves the variable "texttoshow";
     return function eventHandler(e) {
         $("#event_content").text(texttoshow);
     };
}

edited May 23 '17 at 11:56

Community

1
1

answered Feb 08 '13 at 00:22

Bergi

630,263
148
957
1,375

this is not showing up the #side_dates, and yes i saw the sideDates\sidedates error. Please refer to updated question and thanks for the help! – zentili Feb 08 '13 at 00:40
OK, fixed the syntax errors. Works now, at least from console. – Bergi Feb 08 '13 at 00:45
shoud i put this inside the $(document).ready ? I tried both ways but still doesn't work – zentili Feb 08 '13 at 00:48
ok. that code solved my problem. you can see it working now. also, thommy's code will help me in better storing the values into variables. Thank you everyone, you're amazing. – zentili Feb 08 '13 at 00:57

score 0 · Answer 2 · edited Feb 08 '13 at 00:47

0

I don't know, how You access the source (xml), but I made a jsFiddle & hope It helps...

http://jsfiddle.net/Nrzh8/

THE "HTML"

<?xml version="1.0" encoding="ISO-8859-1"?>

<hr/>Your source:<hr/>

<events>
<event>
<date>
    <weekday>ven</weekday>
    <day>15</day>
    <month>feb</month>
</date>
<place>
    <name>Blue Sound</name>
    <city>Nola</city>
    <address>Corso Italia 7</address>
</place>
<band>
    <name>Random Jazz 6some</name>
    <link>http://randomjazz6.ran</link>
    <members>
        <drummer> Random Drummer </drummer>
        <vocal> Random Vocalist </vocal>
        <bass>Random Bassist</bass>
        <guitar>Random Guitar</guitar>
        <keys>Random keyboarder</keys>
        <other>Random otherist</other>
    </members>
</band>
<description>event description here</description>
</event>    
</events>

<hr/>The result (click it!):<hr/>

<div id="side_dates"></div>
<div id="event_content"></div>

THE JS

$(document).ready(function () {

var xmlsrc = jQuery('event');

whole_date = xmlsrc.find('weekday').html() + ' '
           + xmlsrc.find('day').html() + ' '
           + xmlsrc.find('month').html();

var sideVoice = '<a class="date">' + whole_date + '</a>';

jQuery("#side_dates").html(sideVoice).on('click',   
  function() { jQuery('#event_content').html(xmlsrc.find('description').html());
  }
);
});

edited Feb 08 '13 at 00:47

Bergi

630,263
148
957
1,375

answered Feb 08 '13 at 00:45

Thommy Tomka

332
1
3
14

No, the xml is not just dropped into the HTML, that would be invalid markup. Check the source of [his site](http://campaniajazz.altervista.org/) to see where it comes from! – Bergi Feb 08 '13 at 00:49
Yes, this was my first intention, but as the rest of his code is missing, I just showed a much shorter example. He probably can apply it to his needs. – Thommy Tomka Feb 08 '13 at 00:53
i did not mention that data we're retrieving are from an events.xml file, inside the root directory wich was called this way `if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","events.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML;` – zentili Feb 08 '13 at 00:53
xmlsrc will be the object, no matter as like shown in the example nor passed to the var from an URL with jQuerys get() method. – Thommy Tomka Feb 08 '13 at 00:56
ok, so just take my JS code and replace xmlsrc by your var xmlDOC. – Thommy Tomka Feb 08 '13 at 00:58
once you have more events in the XML replace jQuery('event') by jQuery('events') and walk through it's elements using jQuerys .next(), .prev() or relative methods. – Thommy Tomka Feb 08 '13 at 01:00
sound cool. (can't vote this, the other answer's code did solve my main issue, sorry!) – zentili Feb 08 '13 at 01:06

retrieve the value of all children from an xml node then apply a javascript function to each

2 Answers2