Dynamische Linkerstellung und Variablenübergabe

[LukasR]

Guten Abend zusammen!
Nachdem ich nun einige Stunden gegoogelt und getestet habe, wende ich mich an diese gute Forumcommunity.

Mir stellt sich folgendes Problem:
Ein Popup wird geöffnet, darin arbeitet ein Suchformular.
Dieses ist mit Hilfe von Sajax an die Datenbank geknüpft, um je nach Sucheintrag Datenbanksätze als Liste untereinander auszugeben. Funktioniert einwandfrei. Nun will ich diese dynamisch erzeugten Suchergebnisse (diese Liste) klickbar machen. Sprich, jeder Listeneintrag erhält <a href...

Jetzt kommt der Knackpunkt.
Ich möchte den vom user gewählten Listeneintrag an das Hauptfenster geben und das Popup gleichzeitig schließen, was ich mit onClick="geben()" gelöst habe.
geben() enthält die Übergabe mit opener.document. ... und den window.close() Befehl.
Da die Liste aber dynamisch erzeugt wurde, soll mit der geben() Funktion der Suchbegriff mitgegeben werden, damit ich diesen auf der Hauptseite bearbeiten kann.
Da die Liste mit der for ( in ) Schleife erzeugt wurde, liegt der <a href String für jeden Listeneintrag in einer Variablen.
Wie baue ich dann die Suchbegriffübergabe an die geben() Funktion?

Folgendes hat nicht geklappt (Ausschnitt der Ausgabefunktion):
result = result +
"<a href='#' onclick='geben(" +
such_teile[1] +
")'>" +
Suchbegriffausgabe
"</a>";

Ziel sollte eine Stringzeile in der Variable result sein:
<a href='#' onclick='geben(suchbegriff)'>Suchbegriff</a>

Wenn result dann in der Schleife untereinander aufgelistet wird, so muss jeder Link den entsprechenden Suchbegriff irgendwie an den opener übergeben. Der Einbau von opener direkt in den a href hat nicht geklappt. Erst die Auslagerung in eine extra Funktion (geben()) hat Abhilfe geschafft. Dennoch scheint es zu Syntaxfehlern zu kommen, denn geben() erhält keinen Wert und wird auch nicht ausgeführt.

Die Frage nun, wie kann ich eine Variable in die Funktion (geben()) schreiben, damit der gesamte String aber trotzdem korrekt interpretiert wird und bei Klick die geben() Funktion ausgeführt wird?
Ich wäre sehr erfreut, wenn mir jemand helfen könnte und verbleibe mit freundlichen Grüßen
LukasR

[fastix®]

Moin!

Übergabe von Variablen an Funktionen:

  
<script type="text/javascript">  
function geben(was, wieviel) {  
   alert ('Gib mir ' + wieviel + ' ' + was);  
}  
</script>  
<ol>  
<li><a href='javascript:geben(\'Fisch\', 1)'>Einen Fisch</a></li>  
<li><a href='javascript:geben(\'Eier\', 10)'>Zehn Eier</a></li>  
<li><a href='javascript:geben(\'Käse\' , 1)'>Einen Käse</a></li>  
</ol>  

[ungestestet]

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[LukasR]

Hi!
Danke für dein Beispiel, jedoch war mir dies alles schon klar :-)
Es geht mir viel mehr darum, wie ich

<li><a href='javascript:geben('Fisch', 1)'>Einen Fisch</a></li>

in eine Variable als String packe, damit ich mit Hilfe einer Schleife beliebig viele (in diesem Fall) <li> erstellen kann, je nach Suchergebnisanzahl. Also sowas:

for (x in ergebnis) {
result = "<li><a href='javascript:geben('Fisch', 1)'>Einen Fisch</a></li>";
}
platzhalter.innerHTML = result;

Dabei soll aber Fisch oder 1 dem Datenbankergebnis entsprechen, also in Form einer Variablen übergeben werden:

for (x in ergebnis) {
result = "<li><a href='javascript:geben('Produktvariable', 1)'>Einen " + Produktvariable + "</a></li>";
}
platzhalter.innerHTML = result;

Die " und ' Syntax wird wohl nicht stimmen, nur damit klar wird, was ich anpeile :-)

[fastix®]

Moin!

for (x in ergebnis) {
result = "<li><a href='javascript:geben('Produktvariable', 1)'>Einen " + Produktvariable + "</a></li>";
}
platzhalter.innerHTML = result;

Nun, Du kannst auch die Eigenschaften eines Links beeinflussen:

Ausgangspunkt:

  
<script type="text/javascript">  
function SetLink(Lid,ziel,text) {  
  obj=documentGetElementById(Lid);  
  obj.href=ziel;  
  obj.innerHTML=text;  
  obj.onclick='alert(\'Das hast Du fein gemacht!\');return true';  
}  
</script>  

~~~ ~~~HTML
  
<ul id='Liste'>  
<li><a id='L0' href=''></a></li>  
</ul>  

  
<input type='button' onclick='SetLink(\'L0\', \'http://www.google.de\', \'Google Deutschland\')' value='DE'>  
<input type='button' onclick='SetLink(\'L0\', \'http://www.google.at\', \'Google Österreich\')'  value='AT'>  

[ungetestet]

Sollte die Linkliste erweitert werden sollen so bietet sich Folgendes an:

  
<script type="text/javascript">  
linkCounter=0; // wird ggf. für die ID benötigt  
</script>  
  
<script type="text/javascript">  
function NewLink(LListe,myLinkCounter,Lid,ziel,text) {  
  
  obj=documentGetElementById(Lid);  
  obj.href      = ziel;  
  obj.innerHTML = text;  
  obj.onclick   = 'alert(\'Das hast Du fein gemacht!\');return true';  
  
  myLinkCounter = myLinkCounter + 1  
  objListe      = documentGetElementById(LListe);  
  strListeAlt   = objListe.innerHTML;  
  strListeNeu   = strListeAlt + '<a id="L' + myLinkCounter+ '" href="' + ziel + '">' + text + '</a>';  
  return myLinkCounter;  
}  
  
</script>  
  
<input type='button' onclick='linkCounter=NewLink(\'Liste\', linkCounter, \'http://www.google.de\',  \'Google\')'>  
  

[ungetestet]

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[fastix®]

Moin!

for (x in ergebnis) {
result = "<li><a href='javascript:geben('Produktvariable', 1)'>Einen " + Produktvariable + "</a></li>";
}
platzhalter.innerHTML = result;

Nun, Du kannst auch die Eigenschaften eines Links beeinflussen:

Ausgangspunkt:

  
<script type="text/javascript">  
function SetLink(Lid,ziel,text) {  
  obj=documentGetElementById(Lid);  
  obj.href=ziel;  
  obj.innerHTML=text;  
  obj.onclick='alert(\'Das hast Du fein gemacht!\');return true';  
}  
</script>  

~~~ ~~~HTML
  
<ul id='Liste'>  
<li><a id='L0' href=''></a></li>  
</ul>  

  
<input type='button' onclick='SetLink(\'L0\', \'http://www.google.de\', \'Google Deutschland\')' value='DE'>  
<input type='button' onclick='SetLink(\'L0\', \'http://www.google.at\', \'Google Österreich\')'  value='AT'>  

[ungetestet]

Sollte die Linkliste erweitert werden sollen so bietet sich Folgendes an:

  
<script type="text/javascript">  
linkCounter=0; // wird ggf. für die ID benötigt  
</script>  
  
<script type="text/javascript">  
function NewLink(LListe,myLinkCounter,Lid,ziel,text) {  
  
  myLinkCounter = myLinkCounter + 1  
  objListe      = documentGetElementById(LListe);  
  strListeAlt   = objListe.innerHTML;  
  strListeNeu   = strListeAlt + '<a id="L' + myLinkCounter+ '" href="' + ziel + '">' + text + '</a>';  
  return myLinkCounter;  
}  
  
</script>  
  
<input type='button' onclick='linkCounter=NewLink(\'Liste\', linkCounter, \'http://www.google.de\',  \'Google\')'>  
  

[ungetestet]

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[fastix®]

Moin!

  
<script type="text/javascript">  
function NewLink(LListe,myLinkCounter,Lid,ziel,text) {  
  
  myLinkCounter = myLinkCounter + 1  
  objListe      = documentGetElementById(LListe);  
  strListeAlt   = objListe.innerHTML;  
  strListeNeu   = strListeAlt + '<a id="L' + myLinkCounter+ '" href="' + ziel + '">' + text + '</a>';  
  objListe.innerHTML = strListeNeu // das fehlte noch...  
  return myLinkCounter;  
}  

Ansonsten kannst Du Dich auch gerne mit dem Hinzufügen, Manipulieren und Löschen von 'KindObjekten' beschäftigen. Zur Fehlersuche empfehle ich Firefox und das Add-On 'Fire-Bug'.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Struppi]

obj.onclick='alert('Das hast Du fein gemacht!');return true';

Das ist falsch, der onclick Handler erwartet keinen String, sondern eine Referenz auf eine Funktion.

obj.onclick= function() {  
alert('Das hast Du fein gemacht!');  
return true;  
};  

Struppi.

[molily]

Hallo,

Folgendes hat nicht geklappt (Ausschnitt der Ausgabefunktion):
result = result +
"<a href='#' onclick='geben(" +
such_teile[1] +
")'>" +
Suchbegriffausgabe
"</a>";

Ich nehme mal an, such_teile[1] ergibt einen String? Dann:

"<a href=\"#\" onclick=\"geben('" +  
such_teile[1] +  
"')\">" +  
Suchbegriffausgabe +  
"</a>"

ergibt z.B.

<a href="#" onclick="geben('bla')">blub</a>

Ziel sollte eine Stringzeile in der Variable result sein:
<a href='#' onclick='geben(suchbegriff)'>Suchbegriff</a>

Das würde so nicht funktionieren, anstelle von suchbegriff muss ein String-Literal stehen, der in dem Fall mit " begrenzt sein müsste. Mein obiger Vorschlag verfährt anders herum.

Mathias

[LukasR]

Ich nehme mal an, such_teile[1] ergibt einen String? Dann:

"<a href="#" onclick="geben('" +

such_teile[1] +
"')">" +
Suchbegriffausgabe +
"</a>"

Richtig, such\_teile[1] enthält einen Teil der Suchbegriffausgabe, der in der späteren Hauptseite verwendet werden muss.  
  

> ergibt z.B.  
>   
> <a href="#" onclick="geben('bla')">blub</a>  

Sieht gut aus, nur kommt zu dem ja noch die " der Stringbegrenzung...  
Anhand deines Beispieles habe ich folgendes gemacht:  
  
~~~javascript
result = result + "<a href=\"#\" onclick=\"geben('" + such_teile[1] + "')\">" +  
Suchbegriffausgabe + "</a>"

Dies funktioniert noch nicht. Weiterhin zeigt sich keine Regung, wenn ich die Suchbegriffe anklicke.
Wenn ich die geben() manuell durch einen alleinstehenden Link aufrufe, funktioniert es:
<a href="#" onclick="geben('testeintrag')">ergebnis</a>
Nur scheint die dynamische Erstellung der Links Probleme zu machen. Da die Suchbegriffe vernünftig auftauchen kann es auch nicht daran liegen, also bleibt die Syntax übrig als Fehler. Wenn das nicht geht, werde ich es mit einem Select-Feld versuchen. Komisch scheint es mir dennoch. In PHP würde das problemlos erstellbar sein :-)

Herzlichen Dank für die bisherige schnelle Hilfe!!

[molily]

Hallo,

result = result + "<a href="#" onclick="geben('" + such_teile[1] + "')">" +

Suchbegriffausgabe + "</a>"

>   
> Dies funktioniert noch nicht.  
  
Dann gib dir die Variable mal mit alert() aus, um zu sehen, ob der Code korrekt zusammengesetzt wurde.  
  

> Weiterhin zeigt sich keine Regung, wenn ich die Suchbegriffe anklicke.  
  
→ Debug-Ausgaben einbauen und den Fehler eingrenzen, JavaScript-Konsole überprüfen, mit [Firebug](http://www.getfirebug.com/) arbeiten usw.  
  
Mathias

-- 
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)