Select-Option über json anzeigen

lano

lano

Aktives Mitglied
Moin.
Mir fiel jetzt kein besserer Name ein...
Ich geb auf. Ich probiere auf einer Seite ein Add Button hinzuzufügen.
Der soll dann ein Fensterchen öffnen.
Soweit klappt alles.
Jetzt soll man in dem Fensterchen eine select Box haben.
Die soll die auswählbaren options aus einem json lesen.
Soweit klappt das auch.
Jetzt soll man da nen Eintrag aufrufen und dann soll sich das fensterchen schließen und es soll ein kleines Fensterchen aufgehen das man dann auf der Seite frei plazieren kann.
Das funktioniert nicht. Bzw scheitert an vollkommener unfähigkeit und der fatalen Mischung aus css und javascript.
In diesem Fensterchen sollen dann informationen aus dem json angezeigt werden.
Und wenn man nen kleines x anklickt soll das Fensterchen auch wieder verschwinden.
Angedacht ist das bei veränderung der Bildchen Position, Hab ich schon erwähnt das man keine, eine, oder alle optionen auswählen könnte?
Die neue Position in einen Cookie oder was zu speichern.
Erwähnte ich das sich die Daten in den Fensterchen alle 60 sek aktualiesieren sollten?
Aber mir würde die erste Hürde schon helfen...
Wenn jemand lange weile hat, ich währe ihm auf ewig dankbar.

Und nur um mein suizid Level richtig einzuordnen... Das wäre mit php alles einfacher oder?

Ach so. Es geht sich um das Übel hier http://lano.lan4lano.de/dev/fbtools/fb_firmware/
Tollkühn hab ich alles in eine html Datei gepackt...
und das ist die json Datei dazu http://lano.lan4lano.de/dev/fbtools/fb_firmware/test.json
 
Also, wenn man einen Eintrag in der Liste auswählt, wird ja die myFunction aufgerufen. Diese versucht, gleich das neue Element zu selektieren (ich vermute das, das man dann verschieben können soll?). Das wird aber nicht erstellt und gibt es deswegen noch gar nicht. Ich seh jetzt aber auch keine andere Stelle im Code, an der das Fensterchen erzeugt werden könnte. Hast du das schlicht vergessen?

Wie du es auch schon bei den <option> gemacht hast, das Fensterchen mit document.createElement() erzeugen. Oder mit einer der 100 anderen Möglichkeiten.

Aber erstmal, ist das vielleicht schon die Ursache des Problems?
 
alinnert schrieb:
an der das Fensterchen erzeugt werden könnte. Hast du das schlicht vergessen?
Zum Vergrößern anklicken....

Ich hab keine Ahnung wie. Ich kann ein fensterchen machen. oder zwei mit unterschiedlichen namen. aber wie erzeuge ich so viele wie json einträge sind. bzw wie erstelle ich eins wenn ich eins auswähle.
Nimms mir nicht übel aber ich hab da keinen schimmer, ich weiß ist schlimm, hier http://lano.lan4lano.de/dev/fbtools/fb_infodesk/
hab ich das so gemacht das ich für jedes nen css style angelegt hab, wegen der position beim laden. Wüsste nicht wie ich das dynamisch machen sollte. Es ist ein dilemma 😩
 
Ah, okay. Verstehe das Problem. Ich nehme mal an, wenn sich alle 60 Sekunden die Liste aktualisiert, können auch Einträge verschwinden. Sollen dann auch die ggf. offenen Fenster verschwinden?

Wegen der Dynamik würde ich die Fenster aber bei Bedarf erstellen. Erstmal brauchst du ein Container-Element, in das alle Fensterchen platziert werden. Das ins HTML platzieren und eine ID vergeben.

Dann bräuchte es eine Funktion, die dir ein Fenster erstellt. Z. B. so:

Javascript: 
function createPopup (id) {
    return '<div id="' + id + '"' +
        '  Der Inhalt des Fensters...' +
        '</div>'
}

Das zurückgelieferte HTML kannst du dann folgendermaßen in den Container packen (in der myFunction):

Javascript: 
var popupHtml = createPopup(idAusmJson)
var container = document.getElementById('id-des-containers')
container.insertAdjacentHTML('beforeend', popupHtml)

Das Popup entfernst du so:

Javascript: 
document.getElementById(idDesPopups).remove()

Hilft dir das?
 
alinnert schrieb:
var popupHtml = createPopup(idAusmJson) var container = document.getElementById('id-des-containers') container.insertAdjacentHTML('beforeend', popupHtml)
Zum Vergrößern anklicken....

Jo ich glaub ich habs begriffen. den code für diese popups erzeugst du mit javascript und packst die dann, da hörts dann auf, in container. einfach nen div ? und was weiter versteh ich auch nicht mit dem beforeend. also im grunde generiere code aus dem json daten und füge den da irgendwo hinzu. dieses irgendwo versteh ich nicht.
 
Ja, also createPopup() erzeugt bei jedem Aufruf einen neuen String, der das HTML für ein Popup enthält. Dieses HTML kann man mit element.insertAdjacentHTML() in echte HTML-Elemente umwandeln und zugleich an ein anderes Element dranhängen. Das kann im aktuell sichtbaren HTML-Baum der Webseite sein, kann aber auch ein reines in-memory-Element sein.

Der erste string-Parameter sagt, wo exakt das Element eingefügt werden soll, relativ zum Element, von dem aus man die Methode aufruft ‒ im Beispiel also container. Hier gibt es vier Möglichkeiten:
  • 'beforebegin': Fügt das HTML vor dem öffnenden Tag ein, also außerhalb vor dem Element
  • 'afterbegin': Fügt das HTML nach dem öffnenden Tag ein, also innerhalb als erstes Kindelement
  • 'beforeend': Fügt das HTML vor dem schließenden Tag ein, also innerhalb als letztes Kindelement
  • 'afterend': Fügt das HTML nach dem schließenden Tag ein, also außerhalb nach dem Element
HTML: 
<!-- beforebegin -->
<div class="container">
    <!-- afterbegin -->
    <div>...bereits vorhandene Kindelemente...</div>
    <!-- beforeend -->
</div>
<!-- afterend -->

Der Container hat an der Stelle einige Vorteile: Du weißt, dass alles im Container Popups sind. Wenn du den Container also in einem CSS-Selektor erwähnst, erhältst du garantiert nur Popups. Wenn du den Inhalt des Containers leerst, kannst du so einfach alle Popups entfernen etc.
 
Zurück
Oben Unten