Flask, Wtfroms und Jquery
Verfasst: Dienstag 6. Dezember 2016, 03:41
Hallo liebe Leute,
Ich verwende Flask, Flask-Wtfroms und Jquery um ein Formular zu erstellen. Ich habe Probleme bei der Umsetzung. In meinem Formular möchte ich weitere Formaularfelder durch click auf einen Button hinzufügen. Wie hier z.B. http://bootsnipp.com/snippets/featured/ ... remove-bs3. Dies werde ich mit Jquery vornehmen. Ich weiss nicht genau wie ich das zusammen Spiel von wtfroms jquery und jinja hinbekomme. Beim unten angegeben Code bekomme ich nur folgende Ausgabe: (Markup(u"<Macro 'render_field'>"), 0)(Markup(u"<Macro 'render_field'>"), 0)(Markup(u"<Macro 'render_field'>"), 0). Es wird nicht incrementiert. und die Ausgabe ist anscheinend in Unicode. Was mache ich flasch? Liegt es eventuell an meinem macro? Vielen Dank für jede Hilfe!
Hier einmal mein Code zur Veranschaulichung:
[codebox=html4strict file=Unbenannt.html]# index.html
{% extends "bootstrap/base.html" %}
{% set counter = 0 %}
{% macro render_field(field, count, _class="form-control") %}
<td>{{ field.label }}</td>
<td>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</td>
{% endmacro %}
{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$("#listItems").append('{{ render_field| safe, counter }}');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
<button id="add">Click</button>
<div id="listItems">
{% for item in form.contacts %}
{% set counter = counter + 1%}
{% for it in item %}
{{ render_field(it, counter) }}
{% endfor %}
{% endfor %}
</div>
{% endblock %}
[/code]
# app.py
Ich verwende Flask, Flask-Wtfroms und Jquery um ein Formular zu erstellen. Ich habe Probleme bei der Umsetzung. In meinem Formular möchte ich weitere Formaularfelder durch click auf einen Button hinzufügen. Wie hier z.B. http://bootsnipp.com/snippets/featured/ ... remove-bs3. Dies werde ich mit Jquery vornehmen. Ich weiss nicht genau wie ich das zusammen Spiel von wtfroms jquery und jinja hinbekomme. Beim unten angegeben Code bekomme ich nur folgende Ausgabe: (Markup(u"<Macro 'render_field'>"), 0)(Markup(u"<Macro 'render_field'>"), 0)(Markup(u"<Macro 'render_field'>"), 0). Es wird nicht incrementiert. und die Ausgabe ist anscheinend in Unicode. Was mache ich flasch? Liegt es eventuell an meinem macro? Vielen Dank für jede Hilfe!
Hier einmal mein Code zur Veranschaulichung:
[codebox=html4strict file=Unbenannt.html]# index.html
{% extends "bootstrap/base.html" %}
{% set counter = 0 %}
{% macro render_field(field, count, _class="form-control") %}
<td>{{ field.label }}</td>
<td>{{ field(**kwargs)|safe }}
{% if field.errors %}
<ul class=errors>
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</td>
{% endmacro %}
{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$("#listItems").append('{{ render_field| safe, counter }}');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
<button id="add">Click</button>
<div id="listItems">
{% for item in form.contacts %}
{% set counter = counter + 1%}
{% for it in item %}
{{ render_field(it, counter) }}
{% endfor %}
{% endfor %}
</div>
{% endblock %}
[/code]
# app.py
Code: Alles auswählen
from flask import Flask, render_template
from flask_wtf import FlaskForm
from flask_bootstrap import Bootstrap
from wtforms import StringField, validators, FieldList, FormField, SubmitField
class ContactForm(FlaskForm):
description = StringField('Description')
phone = StringField('Phone')
class PersonForm(FlaskForm):
username = StringField('Name', [validators.Length(min=4, max=25)])
contacts = FieldList(FormField(ContactForm), min_entries=1)
send = SubmitField('Submit')
app = Flask(__name__)
Bootstrap(app)
app.config['SECRET_KEY'] ='blabla'
app.config['WTF_CSRF_ENABLED'] = False
@app.route('/', methods = ('GET', 'POST'))
def index():
form = PersonForm()
return render_template('index.html', form=form)
if __name__ == '__main__':
app.run(debug=True, port=5004)
