Problem mit neuen Elementknoten in Dokument

[Andrea B.]

Hallo Leute,

ich habe ein kleines Problem mit Javascript. Und zwar habe ich Suchfunktion geschrieben, die an sich auch funktioniert. Der Nutzer gibt in ein Formular ein was er sucht, beim Absenden wird eine Funktion aufgerufen die einige Prüfungen vornimmt und wenn alles ok wird ein Array durchsucht und es werden Ergebnisse geliefert. Das Ergebnis kann ich problemlos mit document.write ausgeben, allerdings sind auf der Seite nur noch die Suchergebnisse zu sehen und die gesamte Navigation die noch um das Suchformular ringsrum ist, ist nicht mehr zu sehen.

Also habe ich unter dem Formular einen Bereich mit ID suchergebnisse angelegt (<ul id="suchergebnisse"></ul>). Dort sollen nun alle Ergebnisse als neue Listeneinträge eingehängt werden. Das Problem: Die Einträge blinken im Browser kurz auf (zumindest die Punkte der Listeneinträge) und sind dann wieder verschwunden. Wie bekomme ich es hin dass die Ergebnisse korrekt unter dem Suchformular angezeigt werden?

Auch vermute ich, dass es bei ...getElementByTagName("li")[a]... Probleme geben könnte. Nicht für jedes a gibt es einen Listeneintrag - a ist also nicht fortlaufend, aber bei getElementByTagName("li")[a] gibt a doch das a-te vorkommen an, oder? Könnte ich evtl. aber umgehen indem ich die Suchergebnisse erst in ein weiteres Array schreiben und das dann ausgeben lasse.

Meine Suchfunktion:
function suche(keywords)
{
 for(a=1;a<k.length;a++)
 {
  isin = 0;
  for(b=0;b<keywords.length;b++)
  {
   if(k[a].toLowerCase().indexOf(keywords[b]) != -1)
   {
    isin = 1;
   }
   else
   {
    isin = 0;
    break;
   }
  }
  if(isin == 1)
  {
   var newli = document.createElement("li");
   var newlitext = document.createTextNode(u[a]);
   document.getElementById("suchergebnisse").appendChild(newli);
   document.getElementByTagName("li")[a].appendChild(newlitext);
  }
 }
}

Danke im Voraus,
Andrea

[wahsaga]

hi,

Das Ergebnis kann ich problemlos mit document.write ausgeben, allerdings sind auf der Seite nur noch die Suchergebnisse zu sehen und die gesamte Navigation die noch um das Suchformular ringsrum ist, ist nicht mehr zu sehen.

Ja, so funktioniert document.write nun mal - wenn es nach dem initialen Rendern aufgerufen wird, ersetzt es das aktuelle Dokument.

Auch vermute ich, dass es bei ...getElementByTagName("li")[a]... Probleme geben könnte.

Dann lass es doch einfach weg ...

var newli = document.createElement("li");
   var newlitext = document.createTextNode(u[a]);
   document.getElementById("suchergebnisse").appendChild(newli);
   document.getElementByTagName("li")[a].appendChild(newlitext);

Du willst doch den neuen Textknoten in das neu erzeugte LI einhängen - also mach das doch einfach, die Referenz darauf hast du ja noch, du hast sie dir ja gerade erst in newli abgelegt - letzt Zeile ersetzen durch:

newli.appendChild(newlitext);

Herumhantieren mit irgendeinem Index ist an dieser Stelle komplett überflüssig.

gruß,
wahsaga

[Andrea B.]

Ja, so funktioniert document.write nun mal - wenn es nach dem initialen Rendern aufgerufen wird, ersetzt es das aktuelle Dokument.

Deshalb versuch ich ja eine Alternativlösung hinzubekommen.

newli.appendChild(newlitext);

Danke, das funktioniert. Der Text der damit in das li-Element eingehängt wird enthält HTML, allerdings wird das nicht interpretiert, sondern ausgegeben. Das ist nicht Sinn und Zweck der Sache ...

Allerdings besteht das Problem weiterhin, dass die eingehängten Inhalte nur kurz erscheinen und dann sofort wieder weg sind.

[Struppi]

Danke, das funktioniert. Der Text der damit in das li-Element eingehängt wird enthält HTML, allerdings wird das nicht interpretiert, sondern ausgegeben. Das ist nicht Sinn und Zweck der Sache ...

Wenn du einen Textknoten erzeugt ist das durchaus der Sinn der Sache, wenn dein Text HTML Elemente enthalten soll musst du diese erzeugen, allerdings ist es in diesem Fall meistens einfacher mit innerHTML zu arbeiten.

Struppi.

[wahsaga]

hi,

Allerdings besteht das Problem weiterhin, dass die eingehängten Inhalte nur kurz erscheinen und dann sofort wieder weg sind.

Ein Grund dafür ist im gezeigten Code-Ausschnitt nicht zu erkennen.
Beispielseite bitte.

gruß,
wahsaga

[Andrea B.]

Ein Grund dafür ist im gezeigten Code-Ausschnitt nicht zu erkennen.
Beispielseite bitte.

suche.htm: (gekürzt)
<html>
<head>
<script src='suchen.js' type='text/javascript'></script>
</head>
<body>
<div id='title'>
<!-- Titel-->
</div>
<ul id='navigation'>
<!-- Navigation -->
</ul>
<div id='content'>
<form name='Suche' onsubmit='return chkForm()'>
<input type='text' name='suchen' size='50'><br>
<input type='submit' value='Suchen'><input type='reset' value='Abbrechen'>
</form>
<br><hr>
<ul id='suchergebnisse'></ul>
</div></body>
</html>

suchen.js: (stark gekürzt, aber Problem bleibt erkennbar)
var nr=0;
k = new Array();
u = new Array();

function chkForm()
{
 begriff=document.Suche.suchen.value.toLowerCase();
 if(begriff=="")
 {
  alert("Bitte Suchbegriff eingeben!");
  document.Suche.suchen.value="";
  document.Suche.suchen.focus();
  return false;
 }
 else
 {
  var begriffe=begriff.split(" ");
  suche(begriffe);
 }
}

function suche(keywords)
{
 for(a=1;a<k.length;a++)
 {
  isin = 0;
  for(b=0;b<keywords.length;b++)
  {
   if(k[a].toLowerCase().indexOf(keywords[b]) != -1)
   {
    isin = 1;
   }
   else
   {
    isin = 0;
    break;
   }
  }
  if(isin == 1)
  {
   var newli = document.createElement("li");
   var newlitext = document.createTextNode(u[a]);
   document.getElementById("suchergebnisse").appendChild(newli);
   newli.appendChild(newlitext);
  }
 }
}

nr += 1; k[nr] = "Abs"; u[nr] = "<a href='buchst/Abs.pdf' target='_blank'>Abs</a>";
nr += 1; k[nr] = "Abschreibungen"; u[nr] = "<a href='buchst/Abschrei.pdf' target='_blank'>Abschreibungen</a>";
nr += 1; k[nr] = "Agio"; u[nr] = "<a href='buchst/Agio.pdf' target='_blank'>Agio</a>";
nr += 1; k[nr] = "AIBD"; u[nr] = "<a href='buchst/AIBD.pdf' target='_blank'>AIBD</a>";
nr += 1; k[nr] = "Aktie"; u[nr] = "<a href='buchst/Aktie.pdf' target='_blank'>Aktie</a>";

ende suchen.js

[wahsaga]

hi,

<form name='Suche' onsubmit='return chkForm()'>

Da chkForm() im Erfolgsfalle nichts zurückgibt, wird dein Formular abgeschickt, also ein neues Dokument geladen.

Dass darin dann noch die Änderungen, die du per Javascript im vorherigen Dokument vorgenommen hast, enthalten sind, darfst du natürlich nicht erwarten.

gruß,
wahsaga

[Andrea B.]

hi,

<form name='Suche' onsubmit='return chkForm()'>

Da chkForm() im Erfolgsfalle nichts zurückgibt, wird dein Formular abgeschickt, also ein neues Dokument geladen.

Dass darin dann noch die Änderungen, die du per Javascript im vorherigen Dokument vorgenommen hast, enthalten sind, darfst du natürlich nicht erwarten.

gruß,
wahsaga

Danke für den Hinweis. Lasse jetzt auch im Erfolgsfalle false zurückgeben. Was mit sich bringt, das ich die in einem vorherigen Suchgang eingefügten Elemente erst wieder löschen muss bevor die neuen eingefügt werden.
Oder hat jemand einen eleganteren Vorschlag?

VG,
Andrea

[globe]

n'abend,

[...] Das Ergebnis kann ich problemlos mit document.write ausgeben, allerdings sind auf der Seite nur noch die Suchergebnisse zu sehen und die gesamte Navigation die noch um das Suchformular ringsrum ist, ist nicht mehr zu sehen.

das mag daran liegen, dass document.write() allenfalls dafür gedacht ist, beim Laden einer Seite Inhalte einzufügen. Wird document.write() auf eine bereits geladene Seite angewandt, so wird das aktuelle Dokument mit dem neuen Inhalt überschrieben.

Also habe ich unter dem Formular einen Bereich mit ID suchergebnisse angelegt (<ul id="suchergebnisse"></ul>). Dort sollen nun alle Ergebnisse als neue Listeneinträge eingehängt werden.

Der Ansatz ist schon mal wesentlich besser.

var newli = document.createElement("li");
   var newlitext = document.createTextNode(u[a]);
   document.getElementById("suchergebnisse").appendChild(newli);
   document.getElementByTagName("li")[a].appendChild(newlitext);

Die Umsetzung des Ansatzes hingegen nicht.
Was genau möchtest du hier machen?

Der folgende Code erzeugt die Struktur "<li><a href="hallowelt.htm">hallo welt</a></li>"

  
var liObj = document.createElement( 'li' );  
var aObj = document.createElement( 'a' );  
aObj.href="hallowelt.htm";  
aObj.appendChild( document.createTextNode( 'hallo welt' ) );  
liObj.appendChild( aObj );  
document.getElementById( 'suchergebnisse' ).appendChild( liObj );  

weiterhin schönen abend...

[Andrea B.]

Was genau möchtest du hier machen?

Der folgende Code erzeugt die Struktur "<li><a href="hallowelt.htm">hallo welt</a></li>"

var liObj = document.createElement( 'li' );
var aObj = document.createElement( 'a' );
aObj.href="hallowelt.htm";
aObj.appendChild( document.createTextNode( 'hallo welt' ) );
liObj.appendChild( aObj );
document.getElementById( 'suchergebnisse' ).appendChild( liObj );

  
Ich möchte haben:  
Einen Listeneintrag dessen Inhalt ein aus einem Array ausgelesener Link ist. Der HTML-Code steht bereits im Array. Mit createTextNode wird er leider nicht interpretiert.  
  
Hauptproblem ist dass das erzeugte Konstrukt auch sichtbar bleibt und nicht sofort wieder verschwindet.