kleines IE problem (onclick auf DIV)

[psykadelik]

Hey all,

ich bastel gerade ein kleines ajax frontend fuer ein recht bekanntes blog system und bin gerade auf folgendes problem beim testen mit IE gestossen:


Ich erstelle die Uebersicht der Eintraege mittels:

for ... {
        box.appendChild( foo(entry) );
}

function foo(entry) {
        var div = document.createElement('div');
        div.setAttribute('id', entry.getAttribute("id"));
        div.setAttribute('onclick', 'javascript:showEntry(this, '+ entry.getAttribute("id") +');');
        idx_time = document.createElement('em');
        text = unixToTime(entry.getAttribute('time'));
        idx_time.appendChild( document.createTextNode(text) );
...
        div.appendChild(idx_time);
        return div;
} 

generiere also meine komplette Postuebersicht mittels Javascript in einer vorhandenen div-box.
Es klappt alles wunderbar, ich kann die Eintraege oeffnen, schliessen und alles andere mit Opera, Firefox usw, aber nicht mit IE.
Bei IE kommt weder ein Scriptfehler noch aehnliches, er reagiert einfach nicht auf das per Javascript gesetzte onclick event.

Kennt jemand das Problem und weiss evtl ne Loesung dafuer?


danke schonmal im Voraus
psy

[jahlives]

Schon mal mit

div.setAttribute('onclick', 'showEntry('+this+', '+ entry.getAttribute("id") +');'); 

probiert ?
Im onclick nochmals JS zu erwähnen ist völlig überflüssig...

Gruss

tobi

[psykadelik]

ja, so hatte ich es vorher auch, hab zum Schluss halt ne Menge Dinge versucht um zu schaun obs daran liegt...
egal ob mit oder ohne javascript vorm link, macht keinen Unterschied

[RanzigeMilch]

poste doch mal den erzeugten quelltext

[psykadelik]

<DIV id=30 onclick="showEntry(this, 30);">
    <A title="show entry" onclick="showEntry(this, 30); return false;" href="http://foo.bar.xxx/blog2/?showid=30">micha</A>
    <BR>
    <EM>Wed, 29 Mar 2006 08:30:16 UTC</EM>
    <A title="show 7 Section" href="javascript: showBlog(7);">7</A>
    <BR>proftpd AuthUserFile
</DIV> 

dies wird erzeugt, ich hab zum weiteren testen jetzt nen normalen link eingefuegt, damit ich das ueberhaupt mal mit IE testen kann.

[wahsaga]

Re: kleines IE problem (onclick auf DIV)

Es wurde schon öfters erwähnt, dass setAttribute im IE problematisch ist, wenn man damit eine Eigenschaft zu setzen versuchst, die ein Element per se schon besitzt.

Also Eigenschaftswert direkt zuweisen - statt
element.setAttribute(attribut, wert)
die simple Form
element.attribut = wert;
verwenden.

[psykadelik]

das DIV besitzt vorher noch keine onclick eigenschaft, es wird mittels

        var div = document.createElement('div');
        div.setAttribute('id', entry.getAttribute("id"));
        div.setAttribute('onclick', 'showEntry(this, '+ entry.getAttribute("id") +');'); 

doch gerade erst erstellt.
aber so oder so, die div.onclick variante funtioniert leider auch nicht.

[wahsaga]

Original geschrieben von psykadelik
das DIV besitzt vorher noch keine onclick eigenschaft, es wird mittels [...] doch gerade erst erstellt.

Sobald es über createElement erstellt ist, besitzt es eine onclick-Eigenschaft - die zunächst leer ist.

aber so oder so, die div.onclick variante funtioniert leider auch nicht.

div.onclick = funktionsreferenz;

this innerhalb der Funktion referenziert dann auf eben dieses Element.
Und wenn du weitere "Parameter" für die Funktion brauchst ist es am einfachsten, diese ebenfalls als Eigenschaften am Element selber abzulegen (natürlich unter Namen, die mit Javascript-/DOM-eigenen Bezeichnern nicht kollidieren), und dann innerhalb der Funktion auf diese zuzugreifen.

[psykadelik]

das this soll auch auf das html element verweisen, deswegen ist es als string drin und nicht als javascript bezeichner, ich brauche ja einen einstiegspunkt um den inhalt zu veraendern, wuerde ich direkt

this 

referenzieren, bekaeme ich nur das window objekt.

also wenn ich dich jetzt richtig verstanden habe, dann sollte der code wie folgt aussehen:

/*
 * lets create the index-entry-div and return it
 */
function buildIndexEntry(entry) {

        var div = document.createElement('div');
        //div.setAttribute('id', entry.getAttribute("id"));
        //div.setAttribute('onclick', 'showEntry(this, '+ entry.getAttribute("id") +');');
        div.onclick = 'showEntry(this, '+entry.getAttribute("id")+')';
                        
        var idx_email = document.createElement('a');
        idx_email.setAttribute('href', '?showid='+entry.getAttribute("id"));
        idx_email.setAttribute('onclick', 'showEntry(this, '+ entry.getAttribute("id") +'); return false;');
        idx_email.setAttribute('title', 'show entry');
        text = entry.getAttribute('name');
        idx_email.appendChild( document.createTextNode(text) );
        
        idx_time = document.createElement('em');
        text = unixToTime(entry.getAttribute('time'));
        idx_time.appendChild( document.createTextNode(text) );
                
        div.appendChild(idx_email);
        div.appendChild(br());
        div.appendChild(idx_time);
        
        /* no append the sections links */
        var id_sections = entry.getElementsByTagName('sections')[0].getElementsByTagName('section');

        for (var i=0; i < idx_sections.length; i++) {
                idx_sec = document.createElement('a');
                text = idx_sections[i].firstChild.nodeValue;
                idx_sec.setAttribute('href', 'javascript: showBlog('+text+');');
                idx_sec.setAttribute('title', 'show '+text+' Section');
                idx_sec.appendChild( document.createTextNode(text) );
                div.appendChild(idx_sec);
        }

        // append the (html) content
        text = entry.getElementsByTagName('content')[0].firstChild.data;
        div.innerHTML += text;

        return div;
} 

oder versteh ich grad was falsch??

(funktioniert leider so in keinem browser )

edit: den 'a'-tag bitte nich beachten der is nur zum testen da

edit2: div.onclick = function () { showEntry(this, entry.getAttribute("id")); };
geht allerdings auch nicht

[wahsaga]

Original geschrieben von psykadelik
das this soll auch auf das html element verweisen, deswegen ist es als string drin und nicht als javascript bezeichner, ich brauche ja einen einstiegspunkt um den inhalt zu veraendern, wuerde ich direkt this referenzieren, bekaeme ich nur das window objekt.

Nein, bekämst du nicht, wenn du den Event dynamisch so ans Element bindest, wie vorgeschlagen.

[psykadelik]

nun habe ich das mittels einer nested function gemacht, also eben genauso

        div.onclick = function() { 
                showEntry(this, entry.getAttribute("id"));
        }; 

bzw

                        obj.innerHTML = buildIndexEntry(index[i]).innerHTML;
                        //obj.setAttribute('onclick', 'showEntry(this, '+id+');');
                        obj.onclick = function() {
                                showEntry(this, id);
                        }; 

ich koennte auch den code direkt umlagern in die function, allerdings hab ich das der uebersichtlichkeit halber erstmal so gemacht. allerdings passiert gleiches wie zuvor, der IE igonriert es komplett, stellt keine onclick eigenschaft bereit ... bzw es passiert NIX

[psykadelik]

mh (halb) FIXED !!!

also erstmal herzlichen dank, dass mit dem onclick setzen klappt soweit, aber NUR wenn man auf den Text klickt der innerhalb der Box steht, wenn ich die width der Box auf 100% setze, dann geht es auch auf den freien Flaechen ohne Text, allerdings ist damit das 'layout' wieder im Arsch ... narf

Dennoch isses schonmal nen grosser Fortschritt das es ueberhaupt geht! danke