用于编辑的 HTML 和 jQuery 模态答案

【问题标题】：HTML and jQuery Modal for Editing用于编辑的 HTML 和 jQuery 模态
【发布时间】：2021-01-23 02:07:50
【问题描述】：

我对 jQuery 有点陌生，正在研究项目的一些代码。

现有的 jQuery 看起来像这样，这会在删除时弹出一个确认模式：

{% for profile in profiles %}

        $("#delete_{{ profile.id }}").mousedown(function(event){
        let action = "deleteprofile"
        $.confirm({
            title: 'Delete',
            content: 'Are you sure?',
            buttons: {
                confirm: function () {
                    submit_to_modal({
                            'profile_id': "{{ profile.id }}"
                        },
                        action)
                },
                cancel: function () {
                    $.alert('cancel');
                }
            }
        });
    })

{% endfor %}

我认为这个项目在搜索代码中的相似之处后使用了 jquery-confirm，我在这里阅读了它：https://craftpip.github.io/jquery-confirm/ 它也可以在这里找到：How to display a confirm box before submitting a form using jquery confirm?

所以点击 html 中的按钮。例如

  <button id="delete_{{ profile.id }}">Delete</button>

jQuery 将被触发并产生确认。确认后，将触发来自后端视图的 deleteprofile 操作，并发出 DELETE 请求。

但是，我希望能够从中创建一个编辑模式。

如果单击项目列表中的项目（例如配置文件）将产生模式。

我搜索了一下，找到了这些资源：

Bootstrap: Modal dialog for editing data dynamically Jquery .on() submit event

但他们都没有收到会触发特定项目的。例如，我只想编辑 profile-001，但无法使用这些示例完成。我已经尝试过了，但模态框没有弹出。

我发现了这个：How to make an "Edit User" form inside Bootstrap Modal using JQUERY?

但这是在 PHP 上，我只使用 jinja。我也无法在 html 上复制它，因为我对前端的东西还很陌生。

在这种情况下，您通常如何在 jinja 或 jQuery 中将输入字段添加到模态框？我希望能够弹出一个具有输入值的模式，每个项目都将由 jQuery 接收。

也欢迎任何我想找到的来源，我已经扫描了四个小时并尝试对其进行测试，但除了删除模式之外，我无法弹出模式。

【问题讨论】：

标签： javascript html jquery jinja2

【解决方案1】：

使用jQuery-ui cdn，这里是对话框的代码。

ConfirmDialog('Are you sure'); //need to call this function with click, "Are you sure" 
                                 message passed with function

ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Your Title...',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Confirm: function() {

          $('body').append('<h3>Confirm Dialog Result: <b>Confirm</b></h3>');

          $(this).dialog("close");
        },
        Cancel: function() {
          $('body').append('<h3>Confirm Dialog Result: <b>Cancel</b></h3>');

          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

【讨论】：