</form> Tag wird nicht wie definiert platziert

Django, Flask, Bottle, WSGI, CGI…
Antworten
schrodi
User
Beiträge: 16
Registriert: Dienstag 10. Mai 2016, 12:59

Hallo zusammen,

ich habemal wieder ein Problem, das ich mir nicht erklären kann.
Ich nutze Django Templates für meine Seite.

Folgende Templates habe ich:

Dieses Template wird vom View (standard CreateWithInlinesView von django-extra-views) aufgerufen:

[codebox=html5 file=machineAdd.html]
{% extends "layouts/content.html" %}
{% load crispy_forms_tags %}
{% crispy form %}

{% block header%}{% endblock %}
{% block title %}Maschine anlegen{% endblock %}

{% block before_content %}{% endblock %}
{% block content %}
{% url 'machine_add' as formAction %}
{% include "_default/forms/form_with_formsets_tabled.html" with formAction=formAction form=form inlines=inlines formName="machineAdd" %}
{% endblock %}
{% block after_content %}{% endblock %}

{% block footer %}
<a href="{% url 'machine_table' %}" class="btn btn-warning">Abbrechen</a>
<button class ="btn btn-success pull-right" onClick="$('#machineAdd').submit()">Speichern</button>
{% endblock %}

{% block javascript %}{% endblock %}
[/code]

Das "included" Form Template:

[codebox=html5 file=form_with_formsets_tabled.html]
{% load crispy_forms_tags %}
{% load widget_tweaks %}

<form method='POST' id="{{formName}}" name="{{formName}}" class="form" {% if formset.is_multipart %} enctype="multipart/form-data"{% endif %} action="{{formAction}}">
{% csrf_token %}

<div class="form">
{% crispy form %}
</div>

<pre>test</pre>

{% for formset in inlines %}
<div class="formset">
{% include "_default/forms/formset_tabled.html" with formset=formset %}
</div>
{% endfor %}
</form>

{% block javascript %}{% endblock %}
[/code]


Nun habe ich das Problem, dass das </form>-Tag nicht an der Position, wie definiert, im Browser erscheint, sondern viel früher. Das Tag wird bereits direkt nach dem div mit der Klasse form geschlossen.

Code: Alles auswählen

<div class="form"></div> << hier erscheint </form> >>
Bild aus dem Chrome Dev-Tool:
Bild

Über eine Fehlermeldung des formsets bin ich darauf aufmerksam geworden:
Exception Value: [u'ManagementForm-Daten fehlen oder wurden manipuliert.']
Demnach werden die ManagementForm-Daten nicht übertragen. Die Managementform ist aber definitiv vorhanden, nur nicht innerhalt des Form-Tags.

Ich schaffe es einfach nicht, dass das </form> Tag an der gewünschte Position erscheint.

Wo liegt der Fehler?

Gruß André


P.S. Ich weiß nicht warum das Bild nicht angezeigt wird.
Hier der Link: https://www.dropbox.com/s/4wbquxqjo5c91 ... b.PNG?dl=0
skirnir
User
Beiträge: 33
Registriert: Sonntag 25. Januar 2015, 10:59

Der Name der includierten Datei "formset_tabled" lässt darauf schließen, dass die Datei weitere Forms enthält. Laut der Doku des form-Elements
Content model:
Flow content, but with no form element descendants.
dürfen Forms nicht geschachtelt werden. Kann es vielleicht sein, dass die Template-Engine aufgrund dessen das "form"-tag schließt?
BlackJack

Ich würde auch erst einmal die Frage klären *ob* dieses </form> überhaupt von Django dort platziert wird, oder ob das am Ende nicht der Browser ist, der das dort zum Beispiel aus der von skirnir genannten Vermutung erzeugt. Also zeigt das Chrome Dev-Tool an der Stelle das HTML das vom Server kam, oder das aktuelle DOM nachdem der Browser das HTML geparst hat?
Melewo
User
Beiträge: 320
Registriert: Mittwoch 3. Mai 2017, 16:30

schrodi hat geschrieben:[codebox=html5 file=machineAdd.html]
</div>
{% endfor %}
</form>[/code]
Ich kenne mich zwar nicht mit Django aus, dafür aber mit HTML und wenn Du den schließenden Form-Tag hinter dem schließen </div> notierst, dann wird der auch dort erscheinen, würde ich vermuten. Und Form-Tags sind nun einmal Form-Tags und stehen nicht gleich für die Input-Felder, sondern beinhalten nur welche.

https://wiki.selfhtml.org/wiki/Referenz:HTML/form

Also Form-Elemente dürfen vorkommen in Fluss-Elemente und ein Div-Bereich gehört da nicht zu.

https://wiki.selfhtml.org/wiki/HTML/Kat ... s-Elemente

Würde ich jetzt für einen Fehler halten, ob es nur daran liegt, könnte ich Dir aber nicht sagen.
Melewo
User
Beiträge: 320
Registriert: Mittwoch 3. Mai 2017, 16:30

Noch einmal geschaut, Div-Bereiche sollten doch gehen, mein Fehler. Was Du aber machen könntest, Deine Seite ohne Formular erst einmal mit einem Validator aufrufen, ob bereits andere Fehler enthalten sind.
schrodi
User
Beiträge: 16
Registriert: Dienstag 10. Mai 2016, 12:59

skirnir hat geschrieben:Der Name der includierten Datei "formset_tabled" lässt darauf schließen, dass die Datei weitere Forms enthält.
Das stimmt. Aber hier wird kein erneutes Form-Tag erstellt. Hier wird lediglich das inline Formset erstellt:

Code: Alles auswählen

{% load crispy_forms_tags %}
{% load crispy_forms_utils %}
{% load crispy_forms_field %}

<div>
    {{ formset.management_form|crispy }}
</div>

<table{% if form_id %} id="{{ form_id }}_table"{% endif%} class="table">
    <thead>
        {% if formset.readonly and not formset.queryset.exists %}
        {% else %}
            <tr>
                {% for field in formset.forms.0 %}
                    {% if field.label and not field.is_hidden %}
                      {% if field.name != "comment" %}
                        <th for="{{ field.auto_id }}" class="control-label {% if field.field.required and not field|is_checkbox %}requiredField{% endif %}">
                            {{field.name}} {{ field.label|safe }}{% if field.field.required and not field|is_checkbox %}<span class="asteriskField">*</span>{% endif %}
                        </th>
                      {% endif %}
                    {% endif %}
                {% endfor %}
            </tr>
        {% endif %}
    </thead>

    <tbody>
        {% for form in formset %}
            {% if form_show_errors and not form.is_extra %}
                {% include "bootstrap/errors.html" %}
            {% endif %}

            <tr>
                {% for field in form %}
                  {% if field.name != "comment" %}
                    {% include 'bootstrap/field.html' with tag="td" form_show_labels=False %}
                  {% endif %}
                {% endfor %}
            </tr>
            <tr>
              {% for field in form %}
                {% if field.name == "comment" %}
                  {% include 'bootstrap/field.html' with tag="td" form_show_labels=False %}
                {% endif %}
              {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

{% if inputs %}
    <div class="form-actions">
        {% for input in inputs %}
            {% include "bootstrap/layout/baseinput.html" %}
        {% endfor %}
    </div>
{% endif %}
BlackJack hat geschrieben:Ich würde auch erst einmal die Frage klären *ob* dieses </form> überhaupt von Django dort platziert wird, oder ob das am Ende nicht der Browser ist, der das dort zum Beispiel aus der von skirnir genannten Vermutung erzeugt. Also zeigt das Chrome Dev-Tool an der Stelle das HTML das vom Server kam, oder das aktuelle DOM nachdem der Browser das HTML geparst hat?
Wo sehe ich das? Habe im Dev-Tool nirgends einen Hinweis gefunden, ob das Tag vom Server kommt oder ab es vom Browser erstellt wurde.
Melewo hat geschrieben:Noch einmal geschaut, Div-Bereiche sollten doch gehen, mein Fehler. Was Du aber machen könntest, Deine Seite ohne Formular erst einmal mit einem Validator aufrufen, ob bereits andere Fehler enthalten sind.
Habe ich gemacht: Fehlerfrei.

Inklusive Formular gibt es an, dass nested Formtags enthalten wären. Habe das aber nirgends definiert!
Wenn ich jetzt direkt in den Quellcode schaue, ohne Chrome DevTool, sehe ich, dass das erste Formular nochmals mit einem Form-Tag umschlossen ist, zusätzlich zu dem, welches ich definiert habe. Das schließnde </form> wird wahrscheinlich von dem inneren genommen, und das äußere </form> ignoriert. ... ist ja auch nicht zulässig!
Aber woher kommt das das innere <form></form>?

Ich habe es nirgends in meinem Quellcode stehen.

VG Andre
BlackJack

@schrodi: Preisfrage: Wenn man in der Crsipy-Dokumentation das erste Beispiel von '{% crispy form %}' sucht wo danach das HTML gezeigt wird das daraus erzeugt wird: Werden da <form>-Tags erzeugt oder müsste man die selber in den HTML-Quelltext schreiben? ;-)
schrodi
User
Beiträge: 16
Registriert: Dienstag 10. Mai 2016, 12:59

@BlackJack:

Du hast recht. Ich habe es bisher immer selbst hinzugefügt. Das heißt ich bei jedem meiner Formulare immer 2 Form-Tags; bislang aber nie funktionelle Probleme.
Blöd ist, dass das Chrome-Dev Tool das nicht anzeigt. Dann wäre mir das schon viel früher aufgefallen.

Danke.


VG Andre
Antworten