[JavaScript] Dynamisch onclick handler koppelen aan element

[JKVA]

Met JavaServer Faces heb ik een AJAX component gemaakt om een kalender te tonen met als kleine extra functionaliteit het tonen van specifieke daginformatie wanneer je op een dag klikt.

Om dit te realiseren, geef in in mijn XML een onclick attribuut terug in de elementen waar je op moet klikken.

De volgende stap is het overnemen van deze onclick in de TD elementen die ik net gegenereerd heb. In Firefox werkt het prima, daar kan ik gewoon een string in het onclick attribuut zetten. Zie code:

JavaScript:

col.setAttribute("onclick", dagen[j].getAttribute("onclick"));

Dit werkt echter in IE niet. Ik heb ook een stel andere varianten geprobeerd, zoals zonder get/setAttribute() en een probeerseltje met eval().
Allemaal zonder resultaat en nu ben ik benieuwd naar een manier om die onclick handler goed cross browser te zetten.

Deze functie genereert de kalender.

JavaScript:

function changeCalendarData(compId, xmlDoc) {
    var table = document.getElementById(compId + "_table");
    clearTable(table);
    var weken = xmlDoc.getElementsByTagName("tr");
    for (var i = 0; i < weken.length; i++) {
        var row = table.tBodies[0].insertRow(i);
        var dagen = weken[i].getElementsByTagName("td");
        for (var j = 0; j < dagen.length; j++) {
            var col = row.insertCell(j);
            col.innerHTML = dagen[j].firstChild.nodeValue;
            col.className = dagen[j].getAttribute("class");
            col.setAttribute("onclick", dagen[j].getAttribute("onclick"));
        }
    }
}

[BtM909]

waarom niet de DOM1 methode gebruiken?

[JKVA]

Idd, de DOM1 methode werkt beter. Ik kreeg hem eerst niet aan de gang, maar nu werkt het weer. Niet gaan schreeuwen dat het oerlelijk is, want dat weet ik.

JavaScript:

function changeCalendarData(compId, xmlDoc) {
    var table = document.getElementById(compId + "_table");
    clearTable(table);
    var weken = xmlDoc.getElementsByTagName("tr");
    for (var i = 0; i < weken.length; i++) {
        var row = table.tBodies[0].insertRow(i);
        var dagen = weken[i].getElementsByTagName("td");
        for (var j = 0; j < dagen.length; j++) {
            var col = row.insertCell(j);
            col.innerHTML = dagen[j].firstChild.nodeValue;
            col.className = dagen[j].getAttribute("class");
            col.setAttribute("klik", dagen[j].getAttribute("onclick"));
            col.onclick = function (event) {
                var event = getEvent(event);
                var elem = getElement(event);
                eval(elem.getAttribute("klik"));
            };
        }
    }
}

Oh, ja. de toelichting. Ik mik de onclick string die ik terugkrijg in een temp attribuutje en op het moment van het event wordt die weer uitgelezen.

Overigens zit er nog een (misschien niet zo goede) reden achter deze aanpak waarin ik in feite XHTML teruggeef, namelijk dat ik zo de logica van het renderen van de HTML en AJAX-response-XML op één plek hou.

[BtM909]

En waarom gebruik je nou eval. Je weet toch dat dat eigenlijk vies is

[crisp]

JavaScript:

col.onclick = dagen[j].onclick;

setAttribute is niet bedoelt voor eventhandlers.

[JKVA]

BtM909 schreef op woensdag 23 augustus 2006 @ 10:39:
En waarom gebruik je nou eval. Je weet toch dat dat eigenlijk vies is

Vooral omdat ik dat vrij snel aan de gang krijg en mijn huidige project momenteel erg stressy is.
Vandaar ook de extra post. Ik denk, misschien levert het nog interessante ideeen op.

[JKVA]

crisp schreef op woensdag 23 augustus 2006 @ 11:43:

JavaScript:

col.onclick = dagen[j].onclick;

setAttribute is niet bedoelt voor eventhandlers.

Maar ehm, hoe kun je dan zonder setAttribute en eval een string uitvoeren? Wat vanaf de server terugkomt is tenslotte een string, geen callback functie ofzo, die JS meteen kan uitvoeren.

[crisp]

JKVA schreef op donderdag 24 augustus 2006 @ 07:44:
[...]


Maar ehm, hoe kun je dan zonder setAttribute en eval een string uitvoeren? Wat vanaf de server terugkomt is tenslotte een string, geen callback functie ofzo, die JS meteen kan uitvoeren.

JavaScript:

co.onclick = new Function('hier je string');

[JKVA]

crisp schreef op donderdag 24 augustus 2006 @ 08:34:
[...]

JavaScript:

co.onclick = new Function('hier je string');

Maar is dat eigenlijk niet hetzelfde (lees: even lelijk) als eval();?

[crisp]

JKVA schreef op donderdag 24 augustus 2006 @ 12:56:
[...]

Maar is dat eigenlijk niet hetzelfde (lees: even lelijk) als eval();?

nee, de Function constructor is hier juist voor bedoelt.

[JKVA]

crisp schreef op donderdag 24 augustus 2006 @ 13:24:
[...]

nee, de Function constructor is hier juist voor bedoelt.

Ok, en wat verwacht die constructor als param?

Kun je er ook params aan meegeven? Want ik wil er dan zoiets van maken.

<a href="#" onclick="detailScherm('pages/bestellers/bestellerInfo.faces', '_id48', '_id48:_id100', this, '01-08-2006')">linkje</a>