как динамически показывать модальные окна и отправлять данные с помощью Flask

Question

Я пытаюсь динамически вставлять HTML-код модального окна после того, как пользователь щелкает по какому элементу, в противном случае я загружаю весь модальный код оконного элемента в HTML-файл.У меня также есть некоторые входные данные для загрузки модального окна из Flask / Sql, и я хочу позволить пользователю обновить любой из них, поэтому мне нужно отправлять данные обратно в python при нажатии кнопки подтверждения.Но сейчас из-за того, что у меня слишком много модальных окон (хотя они имеют разные идентификаторы), я не смог найти способ достичь этого

Вот мой код:

маршрутов.py

@app.route('/viewApart', methods=['GET', 'POST'])
def viewApart():
  apts = []
  getApts = db.engine.execute("SELECT * FROM apartments")
  for a in getApts:
      apts.append((a))
  rooms = []
  getRooms = db.engine.execute("SELECT * FROM rooms")
  for r in getRooms:
      rooms.append((r))
  return render_template('apartments.html', title=_('Apartments'), apts=apts, rooms=rooms)

apartments.html

....
<section class="container">
<div class="row">
.. below some gallery code to show individual items from apts ..

{% for apt in apts %}
    <div class="col-md-3">
        <a href="javascript:void(0);" class="widget__v2 apt-widget rounded-corners box-shadow__v1 white" data-anchor="modalwindow" data-target="edit-apartment{{ apt[0] }}" id="apt{{ apt[0] }}">
            <div class="widget-header">
                <figure class="image h-180">
                    <img src="{{url_for('static', filename='_assets/img/apt/{{ apt[0] }}.jpg')}}" alt="" class="image__scaledown">
                </figure>

.. below model window ..

<div id="edit-apartment{{ apt[0] }}" class="modal large">
        <div class="modal-wrapper">
            <div class="modal-inner">
                <div class="modal-header">
                    <h3 class="title">{{ _('Edit Apartment') }}</h3>
                    <a href="javascript:void(0);" data-anchor="close-modal" class="modal-close-btn"></a>
                </div>
                <div class="modal-content">
                    <div class="row medium-gutter">
                        <div class="col-md-6">
                            <div class="row medium-gutter">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <div class="form-group-title clearfix">
                                            <label for="apt_display_name">{{ _('Display Name') }}</label>
                                            <div class="lh-24 text__default-grey pull-right" data-tooltip="true" data-tooltip-direction="up" data-multiline="true"
                                                 data-content="..">
                                                <i class="icofont-question-circle"></i>
                                            </div>
                                        </div>
                                        <input id="apt_display_name" type="text" class="form-control" value="{{ apt[1] }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="apt_number">{{ _('Apt. Number') }}</label>
                                        <input id="apt_number" type="text" class="form-control" value="{{ apt[2] }}">
                                    </div>
                                </div>
                            </div>
.. and so on...

.. and submit button ..
<a href="javascript:void(0);"id="btnSubmit">{{ _('Save Changes') }}</a>
</div>
</section>

В настоящее время даже с несколькими окнами моделей я могу отображать текущие данные в модальном окне,так что я хочу достичь этого после нажатия на кнопку btnSubmit мне нужно отправить все входные значения обратно в python, чтобы я мог обновить свой sql или вставить новый.Пожалуйста, дайте мне знать, если вам нужно больше кода ..

Спасибо

Answer 1

Если я правильно понимаю ваш вопрос - скелетная версия вашей страницы будет выглядеть примерно так

<!DOCTYPE html>
<html>
<body>
<p>INTRODUCING MY AWESOME SITE AND 2 DIVS YOU CAN CLICK</p>

<div id="apt_1_modal">
  <input id="apt_1_text"></input>
  <a onclick="myFunction(event)">Submit</a>
</div>

<div id="apt_2_modal">
  <input id="apt_2_text"></input>
  <a onclick="myFunction(event)">Submit</a>
</div>

</body>
</html>

Вам потребуется JavaScript для обработки взаимодействия с пользователем - скрипт будет выглядеть примерно так,Вы можете либо добавить этот сценарий непосредственно к выводу render_template, либо добавить его в файл.

Сценарий будет выполнять 2 действия: сначала захватить то, что вводит пользователь, а затем отправить эти данные на flask

<script>
function myFunction(e) {
//FIRST WE CAPTURE THE VALUE THAT THE USER INPUTS
let userInput = {toSend: e.currentTarget.previousElementSibling.value}

//THEN WE SEND IT TO THE FLASK BACKEND USING AJAX (Fetch API)
fetch("/api/path/to/flask/route", {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(userInput)
}
</script>

Теперь вам нужна функция, которая может обрабатывать userInput data

Backend

from flask import Flask, request #import main Flask class and request object
@app.route('/api/path/to/flask/route', methods=['POST'])
def capture_userinput():
    req_data = request.get_json()
    recd_data = req_data['toSend']
    your_code_to_push_data_to_db(recd_data) #Depends on your ORM/DB

Я надеюсь, что дал вам представление о том, как это сделать - вам, безусловно, придется изменить способ захватаuserInput, настройте fetch вызов и отправьте / перехватите дополнительные данные в вашем flask API.