Bei deinem Javascript meldet sich bei mir übrigens der Debugger:
jinja2.exceptions.TemplateSyntaxError: unexpected char '!' at 7296
FieldList dynamisch füllen
- noisefloor
- User
- Beiträge: 3856
- Registriert: Mittwoch 17. Oktober 2007, 21:40
- Wohnort: WW
- Kontaktdaten:
Hallo,
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
Die Hauptarbeit macht doch jQuery. Lediglich das notwendige durchnummerieren der Namen der Formfelder ist plattes JS ohne Query.Das ist ganz schön viel Javascript, ich glaube mit jQuery müsste es einfacher gehen.
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.jinja2.exceptions.TemplateSyntaxError: unexpected char '!' at 7296
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
- User
- Beiträge: 3856
- Registriert: Mittwoch 17. Oktober 2007, 21:40
- Wohnort: WW
- Kontaktdaten:
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:
Gruß, noisefloor
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>