Выполните 'append_entry ()' для WTForms FieldList типа FormField, через кнопку HTML, без обновления страницы, но покажите результат на той же странице - PullRequest
Новая
       46

Выполните 'append_entry ()' для WTForms FieldList типа FormField, через кнопку HTML, без обновления страницы, но покажите результат на той же странице

0 голосов
/ 06 октября 2019

Полагаю, заголовок сам по себе очень специфичен. У меня есть HTML-файл, который выглядит примерно так: 

    <html>
    <head>
    <title>stackoverflow example</title>
    </head>
    <body>
        <form action="" method="post" role="form">
            {{ form.hidden_tag() }}
            {% for question in form.questions %}
                <p>
                {{ question.subject.label }} {{ question.subject() }}
                {{ question.answer.label }} {{ question.answer() }}
                </p>
            {% endfor %}
            {{ form.submit() }}
        </form>
    </body>
    </html>

Я использую его с Flask, и маршрутизация выглядит примерно так: 

    @app.route('/multiple')

    def upload_multiple():
        form = UploadQuestion()
        form.questions.append_entry()
        return render_template('upload_multiple.html', form=form)

Класс формы, используемый на странице, следующий: 

    class Question(FlaskForm):
       subject = StringField("subject")
       language = StringField("language")
       difficulty = StringField("difficulty")
       answer = StringField("answer")
       type = StringField("type")

    class UploadQuestion(FlaskForm):
       name = StringField('name', validators=[InputRequired()])
       questions = FieldList(FormField(Question), min_entries=1)
       submit = SubmitField('Save')

Я также знаю, что могу использовать функцию append_entry() для экземпляра FieldList из WTFForms,например: 

    from models import UploadQuestion
    form = UploadQuestion()
    form.questions.append_entry()

И это действительно работает, но это только решение на стороне сервера. Я хотел бы, чтобы пользователь мог делать что-то подобное через HTML, не обновляя страницу.

Я бы использовал это для чего-то вроде этого: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="inner">
    <button id="duplicate">Upload another question!</button>
    <form id="question_form" method="post" action="/upload" enctype="multipart/form-data">
    
        <div id="question_holder">
            <div name="question" class="question">
                <div class="question_holder">
                   <div class="question_image">
                        <dl>
                            <label for="chooseFiles">Add Images</label>
                            <br>
                            <img class="main-image" style="width: 250px; height: 250px;" src="http://placehold.it/180" />
                        </dl>
                    </div>
                    <div class="question_inputs">
                        
                        <br>
            
                        <div class="question_dropdown">
                            <p>Subject
                                <select name="subject">
                                    {% for s in subject %}
                                    <option value="{{ s.initials }}">{{ s.subject }}</option>
                                    {% endfor %}
                                </select>
                                <br>
                                <br>
                            </p>
                            
                            
                        </div>
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <br>
        <input class="btn btn-primary btn-lg" type="submit" value="Submit">
    </form>
</div>
<script>
$('#duplicate').on("click", function() {
        $new_question = $(".question").first().clone(1).appendTo("#question_holder");
        if ($new_question.children().filter(".question_holder").is(":visible")) {
            $new_question.children().filter(".close_question").click()
        }
});
</script>

Но если я сделаю это таким образом, код Jinja2 также не будет дублироваться, и если я попытаюсь обновить страницу после создания новой записипользователь потеряет уже введенные данные!

Буду очень признателен за помощь, спасибо!

...