onclick wird nicht ausgelöst...

[SebastianJu]

Hallo,

ich habe eine Linkliste bei deren Linkclicks eine Javascript-Funktion aufgerufen werden soll. Zum Testen habe ich erstmal ein Alert genommen.

Was ich nicht verstehe ist dass die Links in einem Span dass während der Laufzeit mit Javascript gefüllt wird nicht auf Javascript reagieren aber wenn ich so einen Link genau so rauskopiere und unter das Span setze klappt es. Ich komm nicht drauf wieso...

#livesearch {  
  display:none;  
  padding:2px 3px;  
  position:absolute;  
  background:#ffffff;  
  border:1px solid #cccccc;  
  color: #000000;  
}  
a.livesearchlink {  
  display:block;  
  text-decoration:none;  
  color:black;  
  padding:2px;  
}  
a.livesearchlink:hover {  
  background:#DBE4F0;  
}

Die css-Definitionen.

<form name="formajaxsearchbox" id="formajaxsearchbox" onSubmit="return searchFor(document.formajaxsearchbox.inputajaxsearchbox.value);">  
  <input type="text" size="30" name="inputajaxsearchbox" onkeyup="livesearchfunc(this.value)" onblur="document.getElementById('livesearch').style.display='none';""/>  
  <input type="submit" value="Suche" /><br/>  
  <span id="livesearch"></span>  
  
  <a href="#" onclick="alert(this.innerHTML);" class="livesearchlink">CDs und DVDs ("Silberlinge")</a>  
</form>

Der HTML-Code. Und in den Span wird während der Laufzeit eine Linkliste geladen und das span auf display:inline gesetzt. Nach der Form wie im unteren Skript.
Und unter dem span ist einer der Links aus dem span mal rauskopiert. Dieser zeigt das Alert aber nicht die dynamisch eingefügten Links im Span...

while ($ar = mysql_fetch_array($rs)) {  
    echo '<a href="#" onclick="alert(this.innerHTML);" class="livesearchlink">'.$ar['ABC_Titel'].'</a>';  
  }

Weiß jemand wieso das nicht geht? Fehlerkonsole zeigt keine Fehler bei Linkclick.

[gast42]

[code lang=html]
  <input type="text" ... onblur="document.getElementById('livesearch').style.display='none';""/>

... das span auf display:inline gesetzt.

sieht eher nach display:none aus

[SebastianJu]

[code lang=html]
  <input type="text" ... onblur="document.getElementById('livesearch').style.display='none';""/>

... das span auf display:inline gesetzt.

sieht eher nach display:none aus

Das span is snfangs auf none und wird bei aktivierung durch Füllen mit Links auf inline gesetzt. Das funktioniert auch. Die link erscheinen auch. Alles klappt bis auf den Punkt dass das onclick nicht getriggert wird. Und wenn ich den gleichen linkcode dann aus dem span rauskopiere und darunter fest in den code schreibe dann klappt es bei diesem link...

[suit]

Das span is snfangs auf none und wird bei aktivierung durch Füllen mit Links auf inline gesetzt.

Wo wird das gemacht, ich seh's nicht.

[SebastianJu]

Das span is snfangs auf none und wird bei aktivierung durch Füllen mit Links auf inline gesetzt.

Wo wird das gemacht, ich seh's nicht.

Das passiert in einer Javascript-Ajax-Funktion. Die Funktion hab ich jetzt nicht gepostet weil es ja ausreicht wenn ich den serverseitigen Code poste der das Echo für die Links zeigt und sage dass das span auf display:inline gesetzt wird. Das funktioniert ja auch alles. Das span wird sichtbar, die Links sind sichtbar und korrekt formatiert aber wenn ich so einen Link innerhalb des Span klicke dann wird kein onclick ausgelöst. Wenn ich dann aber einen dieser Links aus dem span in den normalen Quellcode kopiere und die Seite neu lade dann funktioniert onclick mit diesem Link. aber nach wie vor nicht bei denen innerhalb des span.

[Felix Riesterer]

Lieber SebastianJu,

Das passiert in einer Javascript-Ajax-Funktion.

aha, die wesentlichen Informationen kommen also doch noch... ts, ts, ts!

Du erzeugst also neue HTML-Elemente, die Du dann ins DOM einhängst. Wie genau geschieht denn die Erzeugung? Dort wird nämlich der Hase im Pfeffer liegen.

Deshalb war der Hinweis mit "clientseitiges Problem -> clientseitiger Code" schon richtig. Nur hast Du uns einen wesentlichen Teil des clientseitigen Codes verschwiegen!

Liebe Grüße,

Felix Riesterer.

[SebastianJu]

Ich dachte das hier reicht: "Und in den Span wird während der Laufzeit eine Linkliste geladen und das span auf display:inline gesetzt. Nach der Form wie im unteren Skript." :)

Aber das Stichwort Ajax hätte ich ruhig fallen lassen können... :)

Was meinst du wie genau die Erzeugung funktioniert? Ich rufe eine php-Datei auf die dann einen iso8859-1-codierten string zurückgibt...

Übrigens habe ich noch ein Ajax auf der gleichen Seite. Da wird ein div gefüllt mit einer Tabelle. Und die Tabelle enthält auch Links. Und die sind klickbar (oncklick kann ich im Moment aber nicht testen). Ich denke aber es wird nicht getriggert da bei den Links im span um die es geht auch nichts passiert wenn draufgeklickt wird. Was bei dem rauskopierten Link anders ist. Da wird nach dem Alert auch eine andere Seite aufgerufen.

Damit es vollständig ist hier noch mal die css-definitionen und das javascript um das es geht:

  
  
...  
  
function livesearchfunc(suchbegriff){  
    if (suchbegriff.length==0){  
      document.getElementById("livesearch").innerHTML="";  
      document.getElementById("livesearch").style.display="none";  
      return;  
    }  
  
    var xmlhttp;  
    if (window.XMLHttpRequest){  
      // code for IE7+, Firefox, Chrome, Opera, Safari  
      xmlhttp=new XMLHttpRequest();  
    }else if (window.ActiveXObject){<div></div>  
      // code for IE6, IE5  
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
    }else{  
      alert("Es tut uns leid aber Ihr Browser unterstützt keine XMLHTTP Funktionalität.");  
    }  
  
    xmlhttp.onreadystatechange=function(){  
      if(xmlhttp.readyState==4 && xmlhttp.status==200){  
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;  
        document.getElementById("livesearch").style.display="inline";  
      }  
    }  
    var url="###formdirection###";  
    url=url+"?eID=ajaxlivesearch";  
    url=url+"&ajaxquery="+suchbegriff;  
    url=url+"&ajaxcid=###ajaxcid###";  
    url=url+"&pagelink=###pagelink###";  
    url=url+"&templatefile=###templatefile###";  
    url=url+"&sdda=###sdda###";  
    url=url+"&sid="+Math.random();  
  
    xmlhttp.open("GET",url,true);  
    xmlhttp.send(null);  
    return false;  
  }  
  function livesearchclickedoption(test){  
    alert("da");  
    return false;  
  }  
//-->  
</script>  
  
<style type="text/css">  
<!--  
/*Tooltip*/  
#livesearch {  
  display:none;  
  padding:2px 3px;  
  position:absolute;  
  background:#ffffff;  
  border:1px solid #cccccc;  
  color: #000000;  
}  
a.livesearchlink {  
  display:block;  
  text-decoration:none;  
  color:black;  
  padding:2px;  
}  
a.livesearchlink:hover {  
  background:#DBE4F0;  
}  
-->  
</style>

[SebastianJu]

Addon... bei der zweiten Ajax-Funktion ist das Div dass die Tabelle enthält aber nie auf display:none gesetzt. Kann man vielleicht kein display:none benutzen wenn darin die links noch funktionieren sollen? gibt es eine alternative dazu? Das span liegt je nach anzahl der links über der darunterliegenden tabelle...

[Felix Riesterer]

Lieber SebastianJu,

}else if (window.ActiveXObject){<div></div>
      // code for IE6, IE5

Was machen denn diese beiden Tags dort? Führt das denn in anständigen Browsern zu keiner Fehlermeldung?

if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.display="inline";
      }

Das hier ist die Stelle, die ich meinte. Du änderst also einfach die innerHTML-Eigenschaft Deines <span>. Da wird in der Tat kein JavaScript "interpretiert". Verwende die üblichen DOM-Funktionen zum Erzeugen (document.createElement) und Einhängen (<element>.appendChild oder <element>.insertBefore). Dabei kannst Du dann auch onclick-Eigenschaften so definieren, dass sie tatsächlich "interpretiert" werden.

Liebe Grüße,

Felix Riesterer.

[SebastianJu]

Was machen denn diese beiden Tags dort? Führt das denn in anständigen Browsern zu keiner Fehlermeldung?

Bisher nicht. Ich habe den Code vom Grundgerüst her aus dem Netz kopiert weil das mein erstes Ajax ist. Bisher hat sich noch kein Browser beschwert.

if(xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.display="inline";
      }

Das hier ist die Stelle, die ich meinte. Du änderst also einfach die innerHTML-Eigenschaft Deines <span>. Da wird in der Tat kein JavaScript "interpretiert". Verwende die üblichen DOM-Funktionen zum Erzeugen (document.createElement) und Einhängen (<element>.appendChild oder <element>.insertBefore). Dabei kannst Du dann auch onclick-Eigenschaften so definieren, dass sie tatsächlich "interpretiert" werden.

Dass die Ajax-Response mit innerhtml gefüllt wird habe ich bisher in allen tutorials so gesehen. Aber ich suche mal ob ich finde wie das mit der anderen Methode funktioniert...

[SebastianJu]

Ich habe jetzt ein wenig mit den Funktionen getestet die du meinst. Aber irgendwie klappt es schon bei createelement nicht.

Sowohl

var linklist = document.createElement("<span id=\"asearch\"></span>");

als auch

var elmnt = document.createElement('<div id="id1" style="width:300; height:50;background-color:#c9c9ad;"></div>');

bringen den Javascriptcode zum Absturz mit der Meldung:

Fehler: uncaught exception: [Exception... "String contains an invalid character"  code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"  location: "http://www.zensiertweilnichtmeins.de/?id=99 Line: 311"]

in der Fehlerkonsole. Dabei hab ich das zweite Beispiel direkt aus einem Tutorial http://www.roseindia.net/javascript/javascript-insertbefore-method.shtml kopiert

[SebastianJu]

Es liegt wohl an den <>. Mit var linklist = document.createElement("span"); klappt es aber es braucht ja noch eine id usw. Vielleicht muss das mit eigenen Befehlen gesetzt werden? Aber trotzdem komisch dass das Tutorial nicht funktioniert.

[SebastianJu]

Mit ~~~javascript var linklist = document.createElement("span");
        linklist.id= 'test';
        document.getElementById("livesearch").appendChild(linklist);

  
geht es jetzt. Warum das Tutorial nicht funktionierte weiß ich nicht.  
  
Jetzt frage ich mich aber ob ich jetzt wirklich jeden Link per Javascript erzeugen muss damit er funktioniert. Klingt fast so. Aber wenn ich auch Javascript in der richtigen Tabellenansicht bräuchte dann würde das ja bedeuten dass ich das ganze php und den Aufbau der Tabelle in Javascript portieren müsste. Klingt ziemlich umständlich und nach doppeltem Code.

[SebastianJu]

Ich habe mich jetzt noch mal nach Beispielen umgesehen wie andere das machen und habe diese Seite gefunden: http://www.gameserveradmin.de/search.php

Das Javascript füllt die Ergebnisliste auch mit innerHTML. Er benutzt zwar divs und keine Links aber die divs reagieren auf onclick und javascript wird ausgeführt... Im Moment sehe ich nicht was ich anders mache...

[Struppi]

Damit es vollständig ist hier noch mal die css-definitionen und das javascript um das es geht:

}else if (window.ActiveXObject){<div></div>

Hier muss dein Browser einen syntaxfehler anzeigen, wenn er es nicht tut, ist das entweder nicht der Code oder der Browser ist kaputt.

var url="###formdirection###";
    url=url+"?eID=ajaxlivesearch";
    url=url+"&ajaxquery="+suchbegriff;
    url=url+"&ajaxcid=###ajaxcid###";
    url=url+"&pagelink=###pagelink###";
    url=url+"&templatefile=###templatefile###";
    url=url+"&sdda=###sdda###";

Warum das scheitern kann, hjab ich dir weiter unten versucht zu erklären.

Struppi.

[SebastianJu]

Damit es vollständig ist hier noch mal die css-definitionen und das javascript um das es geht:

}else if (window.ActiveXObject){<div></div>

Hier muss dein Browser einen syntaxfehler anzeigen, wenn er es nicht tut, ist das entweder nicht der Code oder der Browser ist kaputt.

Stimmt. Mir ist jetzt erst aufgefallen dass da div-tags sind ohne Sinn...

[Joachim]

Hi,

while ($ar = mysql_fetch_array($rs)) {
    echo '<a href="#" onclick="alert(this.innerHTML);" class="livesearchlink">'.$ar['ABC_Titel'].'</a>';

Wenn Du clientseitig auftretende Fehler beheben willst ist serverseitig ausgeführter Code völlig irrelevant. Schau in den _erzeugten_ html-Quellcode und poste den ggf.

Gruesse, Joachim

[SebastianJu]

Aber den erzeugten Quellcode hab ich doch gepostet...

[suit]

Aber den erzeugten Quellcode hab ich doch gepostet...

Ja, der zusätzliche serverseitige Code ist in diesem Fall aber trotzdem unnütz ;)

[SebastianJu]

Aber den erzeugten Quellcode hab ich doch gepostet...

Ja, der zusätzliche serverseitige Code ist in diesem Fall aber trotzdem unnütz ;)

Aber das span ist in meinem Beispiel leer und mit dem serverseitigen Code kann man erkennen was in das span reinkommt... :)

[Felix Riesterer]

Lieber SebastianJu,

passiert dasselbe, wenn Du das <span> nicht auf display:none setzt, sodass die Links schon beim Laden sichtbar sind?

Liebe Grüße,

Felix Riesterer.

[SebastianJu]

Lieber SebastianJu,

passiert dasselbe, wenn Du das <span> nicht auf display:none setzt, sodass die Links schon beim Laden sichtbar sind?

Liebe Grüße,

Felix Riesterer.

Gute Idee...

Ich habe jetzt mal die initiale none-display auf inline gesetzt und einen der Links fest in das span geschrieben. Und da klappte das onclick. Dann hab ich das span initial auf inline gelassen aber das span leergelassen. Und die Links die eingefüllt wurden funktionierten wieder nicht. Also dachte ich vielleicht sind die Links kaputt und habe mit die xmlhttp-antwort per alert ausgeben lassen. Aber da sind keine Fehler drin.
Kann es also sein dass Javascript nicht interpretiert wird wenn es während der Laufzeit eingefügt wird? Ich habe das dann getestet und das alert aus dem code mit einem funktionsaufruf ersetzt der ein alert macht. Aber das klappte auch nicht.

[Felix Riesterer]

Lieber SebastianJu,

Kann es also sein dass Javascript nicht interpretiert wird wenn es während der Laufzeit eingefügt wird?

JA!

Liebe Grüße,

Felix Riesterer.

[SebastianJu]

Ich glaub ich habs jetzt... Das Problem war das Display des span. Wenn ich Links einfüllte setzte ich display auf inline. Wenn ich es auf block setze wird javascript ausgeführt...

Und in der Searchbox musste ich das onblur rausnehmen weil das auch verhinderte dass onclick ausgeführt wurde da offenbar dann schon der link nicht mehr da war. Wie ich verhindere dass die Vorschlagsliste weiterhin erscheint wenn der Focus von der suchbox entfernt wird muss ich noch überlegen. Zur Not lass ich die Liste halt sichtbar.