时间戳

首页 > 解决方案 > 烧瓶添加模态以在删除前询问。如何开始工作？

javascript - 烧瓶添加模态以在删除前询问。如何开始工作？

问题描述

在我的 Flask APP 中，我有一个带有要删除链接的页面：在表内，每一行都有这个 id，我在这里发送 ID（通常我用来删除）：

   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" id="submits" onclick="send_to_modal('{{post.id}}')">
  Borrar
  </button>

这是我的javascript：

function send_to_modal(id){
    document.getElementById("exampleModalLabel").innerHTML = id;

};

模态：

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">        </button>
      </div>
      <div class="modal-body">

        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" onclick="modal_a_funccion()">SI</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">NO</button>
      </div>
    </div>
  </div>
</div>

我不知道如何将 ID 发送到另一个负责删除指定数据的函数：

这是我的功能，可以正常工作并删除提供 ID 的数据：

function modal_a_funccion(id){
        console.log("Solicitando un report para: "+id);
        //fetch('/report/' + olt_hostname).then(function(response) {
        fetch('/task/report_celery/' + id).then(function(response) {
                response.json().then(function(data) {
                    for (var x of data.ip) {
                        console.log("REPORT_fetch recibe (IP): " +x.ip_oob)
                        console.log("REPORT_fetch recibe (ESTADO): " +x.estado)

                    };
                });
            });
    };

我想知道如何去做。

我打算做的是添加一个模式来要求用户确认是否删除。我找不到将 Id 传递给负责删除的函数的方法。我想知道怎么做。太感谢了。

标签： javascriptpythonflaskmodal-dialogbootstrap-5

解决方案

一个可能的解决方案（以不同的方式）

  1. 当用户单击删除一行时，添加一个类，例如to_delete. 然后显示模式弹出窗口，询问用户是否要继续删除。

  2. 如果用户说不，请关闭模式并再次删除该类

  3. 如果用户说是，调用删除函数

对于 3，您可以执行类似的操作

    // Find the element that user has marked for delete
    const element = document.querySelect(".to_delete")
    const id = element.id;

对于 2，你做类似的事情

   // Find the element that user has marked for delete and remove the delete mark
   document.querySelect(".to_delete").classList.remove("to_delete")

推荐阅读