Eine Drop-Down Liste dynamisch mit Daten füllen die auch als Link funktionieren? Servlets, JSP, JSTL, JS?

Hallo,

ich habe folgendes Problem. Ich habe auf meine Webseite eine Navigationsleiste. Diese Navigationsseite ist mit Buttons gefüllt. Wenn man auf einen Button klick kommt eine Drop down liste mit Unterkategorien

Ich habe meine Kategorien in meinem Datenbank gespeichert. Ich will die Drop down liste so programmieren, dass sie dynamisch ist. Also wenn ich in meiner Datenbank eine neue Zeile hinzufüge soll die drop down liste automatisch erweitert werden.

Ich muss später kategorien über eine UI anlegen können. Deswegen ist es wichtig dass die Unterkategorien die ich anlege, Oberkategorien haben, damit Sie wissen wo sie danach stehen müssen.

Wenn ich auf eine Unterkategorie klicke soll diese ein Servlet aufrufen welche Dann eine JSP Seite mit den Entsprechenden Daten aus der Datenbank füllt.

So ungefähr sieht meine Logik aus (siehe Meisterwek unten):

Die Drop down liste habe ich mit JavaSricpt gemacht. Der Servlet steht auch schon was ich eigentlich jetzt noch brauche ist es wie ich die Dropdown liste Dynamisch füllen kann. Und wie ich diese Gleichzeitig als <href> tags benutzen kann.

Ich habe mittlerweile so viele Ideen versucht, dass ich total durcheinander gekommen bin. Ich habe gehofft jemand der da mehr Ahnung hat könnte mir helfen :)

Answer 1

[regex9]

Rendere die Listen doch so, als wolltest du sie schon anzeigen. Lade sie nicht erst nach, wenn die Navigation geöffnet wird. Im schlimmsten Fall ergeben sich dabei Lags, wenn die Netzwerkverbindung mal nicht so gut ist.

Die Elemente kannst du via CSS vorerst ausblenden und erst bei Hover einblenden lassen.

Grobes Beispiel:

<ul class="submenu">
  <!-- navigation submmenu -->
</ul>

CSS:

.submenu li {
  display: none;
}

.submenu:hover li {
  display: block;
}

Komplette Beispiele für so ein CSS-Menü findest du hier.

So sinkt die Komplexität deiner Anwendung und ebenso die Fehleranfälligkeit. Der Endnutzer kann sogar getrost jegliches Skript auf deiner Seite blockieren und es funktioniert trotzdem noch.

Und wie ich diese Gleichzeitig als <href> tags benutzen kann.

Also für die Links werden durchgehend a-Tags verwendet. Vielleicht trifft dieses Beispiel dein Problem und löst es:

<ul>
  <li>
    <a href="photography.jsp">Photography</a>
    <ul>
      <li><a href="animals.jsp">Animals</a></li>
      <li><a href="cars.jsp">Cars</a></li>
      <li><a href="nature.jsp">Nature</a></li>
    </ul>
  </li>
  <!-- further li elements ... -->
</ul>

Answer 2

[codinghelp]

mit JS kannst du dynamisch elemente erstellen und der Website anhängen:

document.createElement(type);

Answer 3

[whgoffline]

Das kannst du mit NodeJS machen. Der NodeJs server gibt dir dann über eine Rest API im JS im Browser alle Datenbankeinträge als json zurück. Diese geht du dann Stück für Stück in deinem Js code durch und erzeugst entsprechende a Tags mit der createElemet funktion.

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Comments

[regex9]

Wieso sollte er für diese eine Aufgabe noch einen NodeJS-Server einbinden? Er arbeitet mit Java (Servlets).