Ajax url Problem mit Django

[/me]

Du könntest dir den Wert auch aus dem Cookie holen: Cross Site Request Forgery protection - Ajax

[Metatron]

ja, aber ich dachte das man {% %} verwenden kann, damit django beim erstellen der Seite den inhalt ersetzt.
also var token = "{% csrf_token %}"
und django ersetzt das {% csrf_token %} mit dem realen token...?

[__blackjack__]

@Metatron: In Templates, ja, aber doch nicht auf magische Weise in jeder x-beliebigen Datei. Statische Sachen wie JavaScript-Dateien werden in Produktivsystemen doch auch üblicherweise gar nicht über Django ausgeliefert, sondern über einen Webserver.

[Metatron]

Hallo,

ich habe die nächste Anfänger Frage.

Ich möchte eine Seite neu Rendern dafür nutze ich in der view.py den folgenden Rückgabewert:

Code: Alles auswählen

return render(request, '/water/WaterForm.html', {'WaterForm': WEsF})

Sofern ich einen HTML Butten im HTML Skript benutze, funktioniert das ganze auch ohne probleme.

Nun möchte ich jedoch, das ich etwas mit der Maus auf einer Javascript Karte anklicke und das dann die Seite neu gerendert wird.
Also den Button mit einer javascript interaktion ersetzen.

Ich habe dafür einen AJAX aufruf verwendet.

Code: Alles auswählen

            $.ajax(
            {
                headers: { "X-CSRFToken": token },
                type: "POST",
                url: 'water',
                data: {
                        'source[]': src,
                      },
                success:function (){},
                complete:function (){},
                error:function (xhr, textStatus, thrownError){}
            });

der AJAX aufruf kommt auch erfolgreich an, jedoch schaffe ich es nicht das die Seite neu gerendet wird. Ich nehme an das der AJAX aufruf von der Javascript Seite nach dem senden noch nicht abgeschlossen ist, oder?
Also das irgendetwas in den

Code: Alles auswählen

success:function (){},

ausgeführt werden muss? Die neu gerenderte Seite wird zum Javascript zurück gesendet oder?

[__blackjack__]

@Metatron: Jain. Also ja, die ausgefüllte HTML-Vorlage wird zurückgesendet und ist in dem Argument enthalten das der `success`-Funktion übergeben wird, aber warum benutzt Du einen Ajax-Aufruf wenn doch eigentlich das passieren soll was ohne Ajax passieren würde?

Wenn Du das so machen willst, musst Du halt in der Funktion das Dokument welches im Browser angezeigt wird, durch das ersetzen was die `sucess`-Funktion bekommt.

`WEsF` ist übrigens ein denkbar schlechter Name. Der entspricht in der Schreibweise nicht den Konventionen und ist auch total unverständlich.

[Sirius3]

Wie schon geschrieben, benutzt man heutzutage kein jQuery mehr, weil alle Funktionen von modernen Browsern in ähnlicher Form schon nativ unterstützt werden.
Wenn Du die gesamte HTML-Seite neu aufbauen willst, bentuzt Du window.location, dann brauchst Du kein Ajax. Wenn Du nur Teile der Seite ersetzen willst, mußt Du das entsprechende DOM-Element finden und dessen Inhalt durch das Ergebnis des Ajax-Aufrufs ersetzen.
Bei komplexeren Seiten macht man das über ein passendes Framework (vue.js), das das HTML per Javascript rendert und schickt nur noch die rohen Daten per Ajax.

[__blackjack__]

Das mit dem kein jQuery ist IMHO Propaganda. Man benutzt benutzt sehr wohl heute noch jQuery. Es mag sein das man es technisch gesehen weniger bräuchte, aber das macht es nicht überflüssig. Ich sehe keinen Grund umzulernen und mir gefällt auch die API im grossen und ganzen wesentlich besser, so das ich mir ziemlich sicher bin, das ich auch wenn ich sowieso neu lernen müsste, auf jQuery setzen würde. Was konkret `fetch` vs. Ajax angeht würde mich das „Experimental. Expect behaviour to change in the future“ bei der Fetch-API abschrecken, es sei denn ich hätte Kontrolle darüber welche Clients die Benutzer einsetzen (müssen).

[Metatron]

@Metatron: Jain. Also ja, die ausgefüllte HTML-Vorlage wird zurückgesendet und ist in dem Argument enthalten das der `success`-Funktion übergeben wird, aber warum benutzt Du einen Ajax-Aufruf wenn doch eigentlich das passieren soll was ohne Ajax passieren würde?

ich würde gerne noch ein paar Daten mit schicken, was gibt es den für alternativen?

[Sirius3]

Was möchtest Du denn genau machen? Beschreib doch mal Dein Problem etwas ausführlicher, sonst müssen wir hier raten, was Du denn statt dessen machen könntest.

[Metatron]

also ich habe mir eine javascrip Ausgabe geschrieben. Wenn ich nun auf bestimmte Items innerhalb der Karte mit der Maus klicke, möchte ich ein Eingabeformular anzeigen lassen.
Außerdem möchte ich ein Array von Daten beim klicken des Items, an den Server senden, damit er die Information im Eingabeformular verwenden kann.

Das Anzeigen des Eingabeformulars funktioniert ohne probleme, sofern ich einen HTML-Button als auslöser verwende (hier fehlen dann natürlich die Daten die gesendet werden müssen).
Das Anklicken im Javascript funktioniert auch.

[Sirius3]

Du willst also nur ein Formular anzeigen, mit Daten, die schon im Browser vorhanden sind? Dann ist das eine typische Aufgabe die man in reinem Javascript löst, indem Du ein verstecktes Formular vorhältst, dessen Eingabefelder beim Click auf Deine Karte gefüllt werden und danach angezeigt wird.

Kannst Du mal eine Beispiel-Karte mit Daten und Formular hier posten, dann können wir die konkreter Weiterhelfen.

[Metatron]

Jain,
das Eingabeformular wird aus einem Model generiert, aber ich würde gerne die Koordinaten des Item zusätzlich mit zurück geben.
Ob es jetzt beim Anklicken des Item gesendet wird oder erst mit dem submit des Eingabeformulars, ist ja eigentlich egal. Eventuell wäre zweiteres sogar besser.

[__blackjack__]

Na dann wäre es wohl am einfachsten bei einem Klick auf die Karte die Koordinaten in die entsprechenden Felder des Formulars einzutragen. Wenn es keinen Sinn macht diese Werte dem Benutzer im Formular anzuzeigen, kann man das mit versteckten Eingabefeldern machen.

[Metatron]

ja ok, aber...

der ablauf ist ja folgend:
1. eine Seite mit dem Javascript template wird geladen
2. der Nutzer selektiert ein Item
3. das Javascript sendet führt zum Beispiel ein window.location.href aus.
4. die View.py rendert die Seite neu, jetzt jedoch mit dem Eingabeformular.

Das Problem ist ja das durch das neue Rendern die Daten aus dem Javascript verloren sind.
Also müsste das Javascript mit dem window.location.href eigentlich die Daten zurück zum Server senden?

[Sirius3]

Wenn der Server nur die Daten von Javascript durchreicht, dann ist der Schritt 3 unnötig.
Wenn der Server Daten noch anreichert, dann mußt Du entscheiden, ob es per GET oder per POST-Request laufen soll, und bei zweiterem eine Form anlegen und diese per Javascript absenden.