Question

我试图在用户单击哪个项目时动态插入模式窗口html代码，否则我将所有项目的模式窗口代码加载到html中。我在从Flask / Sql加载的模式窗口中也有一些输入，我想让用户更新它们中的任何一个，因此我需要在单击提交按钮时将数据发送回python。但是现在因为我有太多的模式窗口（即使它们有单独的ID），我也找不到实现此目的的方法

这是我的代码：

routes.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输出中，也可以将其作为文件附加。

该脚本将执行两项操作-首先捕获用户输入的内容，然后将数据发送到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数据的函数

后端

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。

如何动态显示模式窗口并使用Flask发送数据

1 个答案: