Django - Dynamisch Inhalte nachladen

Django, Flask, Bottle, WSGI, CGI…
Antworten
brave
User
Beiträge: 24
Registriert: Mittwoch 24. Februar 2016, 18:30

Hallo zusammen,

Ich würde gerne wissen wie man in Django ohne zusätzlichen Javascript-Code dynamisch Inhalte nachladen und verschachteln kann. Ich weiß vorher aber nicht wie viele Template-Elemente das sind, dynamisch eben.

Ein Minimalbeispiel:
Ich habe eine base.html mit einem Plus-Button. Jedes mal, wenn ich den Plus Button klicke soll ein Template-Element in die base.html nachgeladen werden. Jedes Template Element selbst hat wiederum einen Button um innerhalb seines eigenen Templates-Codes weitere dynamische Inhalte hinzuzulagen.

Wie stellt man das an? Ich habe ein Block-Nesting versucht, was aber nicht funktioniert, weil offenbar nach dem Rendern im Quelltext kein leerer Block vorhanden ist, der erneut ersetzt werden könnte. Ich bin nicht so gut in Javascript, aber ich glaube das Äquivalent hier wäre einfach ein Template mit einem leeren <div>-Tag einzufügen in welches jedes mal wenn ein Element nachgeladen wurde auch ein neuer leerer <div>-Tag für weiteren Content zur Verfügung stehen würde. Aber das muß doch Django auch irgendwie von Haus aus können oder?

<base.html>

Code: Alles auswählen

<html>
...

<!-- navbar -->
{% include "base/base_navbar.html" %}

<!-- basecontent -->
{% block basecontent %}
{% include "base/base_content_start.html" %}
{% endblock %}

<!-- footer -->
{% include "base/base_footer.html" %}

...
</html>
content_level_0.html

Code: Alles auswählen

{% extends base.html %}

{% block basecontent%}
Plus-Button (Level 0)
 	<!-- Block der beim 1. Klick dazugeladen wurde -->
 	{% block dynamic_content_level_0%}
 		Content der durch Click auf Plus-Button dazugeladen wurde
	{% endblock %}
 	
 	<!-- Block der beim 2. Klick dazugeladen wurde -->
 	{% block dynamic_content_level_0%}
 		Content der durch Click auf Plus-Button dazugeladen wurde
	{% endblock %}

	...
	
	<!-- Block der beim n. Klick dazugeladen wurde -->
	{% block dynamic_content_level_0%}
 		Content der durch Click auf Plus-Button dazugeladen wurde
	{% endblock %}
{% endblock %}
content_level1.html

Code: Alles auswählen

{% extends content_level_0.html %}

{% block dynamic_content_level_0%}
Plus-Button (Level 1)
 	<!-- Block der beim 1. Klick dazugeladen wurde -->
 	{% block dynamic_content_level_1%}
 		Content der durch Click auf Plus-Button dazugeladen wurde
	{% endblock %}

	...

<!-- Block der beim n. Klick dazugeladen wurde -->
 	{% block dynamic_content_level_1%}
 		Content der durch Click auf Plus-Button dazugeladen wurde
	{% endblock %}
{% endblock %}
BlackJack

@brave: Ich glaube Du hast eine falsche Vorstellung davon wie so eine Abfrage/Antwort abläuft. Es gibt vom Browser eine Anfrage, daraufhin erstellt Django aus dem Template auf Serverseite eine HTML-Seite die zurück geschickt wird. Alles was an Code/Dynamik im Template steht ist dann abgearbeitet. Damit ist ein Abfrage/Antwort-Zyklus fertig. Wenn auf Klick dann etwas nachgeladen werden soll, muss das neu vom Server abgefragt werden, und wenn es der bereits angezeigten Seite hinzugefügt werden soll, dann muss die Anfrage per JavaScript passieren und das Ergebnis muss auch per JavaScript in die Seite eingebaut werden.

Wenn Du das JavaScript dabei möglichs einfach halten möchtest, dann würde es sich anbieten die HTML-Fragmente auf Serverseite zu erstellen. Und vielleicht jQuery zu verwenden.
DasIch
User
Beiträge: 2718
Registriert: Montag 19. Mai 2008, 04:21
Wohnort: Berlin

brave hat geschrieben:Ich würde gerne wissen wie man in Django ohne zusätzlichen Javascript-Code dynamisch Inhalte nachladen [...] kann.
Gar nicht.
Ein Minimalbeispiel:
Ich habe eine base.html mit einem Plus-Button. Jedes mal, wenn ich den Plus Button klicke soll ein Template-Element in die base.html nachgeladen werden. Jedes Template Element selbst hat wiederum einen Button um innerhalb seines eigenen Templates-Codes weitere dynamische Inhalte hinzuzulagen.

Wie stellt man das an?
Javascript. Du könntest prinzipiell Teile des HTMLs auf dem Server rendern und die mit JS im Browser zusammenzufügen aber ein moderner Ansatz wäre deinen Baum komplett mit JS zu erzeugen.
brave
User
Beiträge: 24
Registriert: Mittwoch 24. Februar 2016, 18:30

Hm, ja, ich fürchte da habe ich eine andere Vorstellung gehabt.
Nun, wenn Django die Templates auf dem Server nur montiert und dann am Ende nur statisch ausliefert, wozu brauche ich dann Django?
Dann könnte ich auch einfach Textdateien mit html und css snippets auf den Webserver legen und direkt alles mit Javascript machen.
Ich denke jetzt verstehe ich warum alle auf ReactJS und AngularJS und ähnliche Frameworks aufbauen, anstatt Django zu benutzen. Irgendwie unbefriedigend, zumal ich mich jetzt schon ein paar Wochen mit Django rumgeschlagen habe :cry:
BlackJack

@brave: Das HTML was Django ausliefert wird ja dynamisch auf wem Webserver zusammengebaut, das ist schon ein Unterschied zu statischem HTML. Wenn Du nur statisches HTML auf dem Server hast und JavaScript im Browser, wie machst Du denn dann Datenbankabfragen auf dem Server? Wenn Du tatsächlich alles mit JavaScript machen kannst was auf Deiner Seite passiert, dann brauchst Du ja nicht einmal mehr einen Server, jedenfalls nicht über den Punkt der ersten Auslieferung hinaus.
brave
User
Beiträge: 24
Registriert: Mittwoch 24. Februar 2016, 18:30

Ich denke ich habe verstanden. Ich geh dann mal Javascript lernen.
(Warum zum Henker hat immer noch niemand nen Browser mit Python als Scriptsprache gebaut? :lol: )

Ich schreib aber gerne mal was zum Hintergrund, vielleicht habt ihr ein paar Design-Tipps:
Theoretisch könnte ich alles in JS machen, aber da bin ich zu schlecht drin. Kann ja gerade mal halbwegs Python.
Da ein nicht unwesentlicher Teil schon als Python Code existiert, will ich halt nicht alles in JS nachbauen.

Ich möchte gerne etwas komplexere Binärdateien aus einem Messgerät von ca. 2-100MB Größe verarbeiten. Die sollen halt eingelesen werden, daraus werden dann Infos ausgelesen und angezeigt und gewisse Teile extrahiert, verarbeitet und anders wieder dargestellt und zu einer anderen Datei neu zusammengebaut. So eine Mischung aus Infos anzeigen und einer Art Formatkonverter.

Das Problem ist halt:
Alles in Python lassen --> Dateien müssen jedesmal zum Server hochgeladen werden --> viel Traffic --> noch mehr, wenn mehr Leute das gleichzeitig machen.
Alles in JS --> muss komplett neu programmiert werden (zu wenig JS Skills) --> Code einsehbar
Zudem hätte ich keine Ahnung wie ich mit JS Binärdateien verarbeiten soll.

Das Leben ist hart :mrgreen: .
Wie würdet ihr euch entscheiden?
BlackJack

@brave: Es gibt ja auch Python-Implementierungen die in JavaScript geschrieben sind und im Browser laufen. Allerdings finde ich die jenseits von „Och das ist ja ein netter Proof-Of-Concept“ nicht wirklich brauchbar.

Ich sehe jetzt bei Deinem Szenario nicht wie Du verhindern willst, dass die Benutzer die Daten auf den Server hochladen müssen‽ JavaScript und Webbrowser sind nicht wirklich dazu geeignet 100 MiB grosse Binärdateien zu bearbeiten.

Das klingt IMHO eher nach einem Fall für eine Desktop-Anwendung, oder zumindest nach einer lokalen Webanwendung.
BlackJack

@brave: Ah, lokale Dateien lesen und auch nur Teile davon geht mit HTML5 anscheinend mittlerweile. Wobei die File-API noch ein Arbeitsentwurf ist. :-)
brave
User
Beiträge: 24
Registriert: Mittwoch 24. Februar 2016, 18:30

BlackJack hat geschrieben:Ich sehe jetzt bei Deinem Szenario nicht wie Du verhindern willst, dass die Benutzer die Daten auf den Server hochladen müssen‽ JavaScript und Webbrowser sind nicht wirklich dazu geeignet 100 MiB grosse Binärdateien zu bearbeiten.
Eben, also ich denke mal das mit dem Upload-Konzept probiere ich jetzt erstmal aus. Im Intranet sollte das eigentlich gut funktionieren. Wir werden sehen.
Das klingt IMHO eher nach einem Fall für eine Desktop-Anwendung, oder zumindest nach einer lokalen Webanwendung.
Das ist ja der Punkt. Die gibts ja schon vom Hersteller. Die ist aber absoluter Mist, stürzt ständig ab und ist unzureichend in den Funktionen. Daher die Idee was eigenes zu bauen, was einmal zentral läuft. Nie wieder Python-Probleme auf zig Rechnern, keine Treiberprobleme etc.

Ich entscheide mich jetzt mal so:
  • Datei wird hochgeladen
  • Datei wird auf dem Server mit Python-Code zerpflückt und gewisse Teile ggf. in die Django Datenbank eingelesen.
  • Die Ergebnisse können dann über das Web-UI dynamisch per jQuery/Ajax in die Webpage nachgeladen werden
Und wenn eh schon alles auf dem Server läuft, dann kann ich die paar Templates für das UI auch auf dem Server erstellen lassen anstatt das alles im Frontend per JS zu machen. Dann brauche ich nur jQuery/Ajax und das wars.

Um den Traffic zu minimieren, hatte ich daran gedacht die Datei vorher per MD5 zu hassen und zu schauen, ob die Datei schonmal hochgeladen wurde. Dafür brauche ich dann aber doch wieder JS für die Binärdatei. Mal sehen.

Puh, trotzdem ne große Aufgabe. Aber dann kann ich endlich mal bokeh so richtig einbauen :)
Antworten