FieldList dynamisch füllen

meego · Mittwoch 27. Januar 2016, 22:45

Bei deinem Javascript meldet sich bei mir übrigens der Debugger:
jinja2.exceptions.TemplateSyntaxError: unexpected char '!' at 7296

noisefloor · Donnerstag 28. Januar 2016, 11:23

Hallo,

Das ist ganz schön viel Javascript, ich glaube mit jQuery müsste es einfacher gehen.

Die Hauptarbeit macht doch jQuery. Lediglich das notwendige durchnummerieren der Namen der Formfelder ist plattes JS ohne Query.

jinja2.exceptions.TemplateSyntaxError: unexpected char '!' at 7296

Dann hast du mit Sicherheit den Übertrag von Bottle nach Flask falsch gemacht. in Bottle steht das `!` dafür, dass der nachfolgende String im Template _nicht_ escaped wird.

Was anders: du hast eine überschaubare endliche Zahl (nämlich 15) an Einträgen, von denen die 7 direkt angezeigt haben willst.
Warum generierst du nicht direkt die komplette Form, blendest die Elemente 8-15 aus und bei Bedarf nacheinander dynamisch ein (z.B. per jQuery). hat den Vorteil, dass die dich nicht um die korrekte manuelle Durchnummerierung des `name`Attributes des Form kümmern musst.

Gruß, noisefloor

noisefloor · Samstag 30. Januar 2016, 20:51

Hallo,

Nachtrag bzw. Update: Das 1. Version des JavaScript funktioniert zwar grundsätzlich, hat aber diverse Stolperfallen wie nicht-fortlaufendes Hochzählen der Felder, wenn man ein Feld löscht oder das man auch alle Felder löschen kann.

Diese Version ist besser - weil sie die o.g. Macken nicht mehr hat:

Code: Alles auswählen

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Forms</title>
    <script src="static/jquery-2.2.0.min.js"></script>
</head>
<body>
<form action="/ingredients" method="POST">
    <div class="input_fields_wrap">
    <!-- here goes the form fields -->
    </div>
    <button class="add_field_button">Add field</button>
    <button class="remove_field_button">Remove field</button>
    <input type="submit">
</form>
<script>
$(document).ready(function() {
    var max_fields = 20; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var addButton = $(".add_field_button"); //Add button ID
    var removeButton = $(".remove_field_button"); //Add button ID
    var htmlString = '<div id="input_fields_0">{{ !form.ingredients }}</div>';
    var field_counter = 0;
    $(wrapper).append(makeString()); //add the first form
    $(addButton).click(function(e){ //on add input button click
        e.preventDefault();
        if(field_counter < max_fields){ //max input box allowed
            field_counter++;
            $(wrapper).append(makeString());}
        else { window.alert('max number of ingredients reached!')}
    });
    $(removeButton).click(function(e){ //on remove input button click
        e.preventDefault();
        if(field_counter > 0){ //make sure at least one field is there
            $('#input_fields_'+field_counter).remove();
            field_counter--;}
        else { window.alert('Cannot delete, one input has to remain.')}
    });
    function makeString() {
        var myString = htmlString;
        return myString.replace(/0/g, field_counter);
    };
});
</script>
</body>
</html>

Gruß, noisefloor