时间戳

首页 > 解决方案 > 将值传递给 Bootstrap4 弹出框

flask - 将值传递给 Bootstrap4 弹出框

问题描述

我有一个循环渲染表（Flask/Jinja），我希望能够快速编辑列中的一条记录，所以我选择使用 bs4 弹出框在一个内部渲染一个选择字段（由 jinja 填充）形式。

由于为每个结果呈现一个隐藏表单可能不是一个好主意，我必须想办法在该表单中设置一个隐藏字段，以便我知道我正在编辑什么记录。但我总是得到“1”......

    $(document).ready(function() {
      $('[data-toggle="popover"]').popover({
      container: 'body',
      html: true,
      placement: 'bottom',
      sanitize: false,
      content: function() {
        let editar = $("#editicon").data("id")
        console.log(editar);
        $(".input-group input").val( editar );

          return $('#PopoverContent').html()
      }
      })
    });

HTML：

    <td id="sts-estado"> {{ pedido.status }}
        <i data-id={{pedido.id}} id="editicon" class="fa fa-pencil" aria-hidden="true" data-target="#PopoverContent" data-trigger="click" tabindex="0" data-toggle="popover"></i></td>
    <td> {{ pedido.contact }}</td>

接近 html 的末尾：

    <div id="PopoverContent" class="d-none">
    <form role="form" class="statuseditform" name="form1">
      <div class="input-group">
                     <input type="hidden" name="editing" id="editing" value=""/>

                     <select name="status" onchange="javascript:this.form.submit()">
                        <option value="{{statuses[0][0]}}" selected="{{statuses[0][0]}}">{{statuses[0][1]}}</option>
                        {% for status in statuses[1:] %}
                            <option value="{{status[0]}}">{{status[1]}}</option>
                        {% endfor %}
                    </select>

          <div class="input-group-append" id="button-addon1">
          <button class="btn btn-outline-primary" type="button" data-toggle="popover" data-placement="bottom"
              data-html="true" data-title="Search">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
      </form>
    </div>

标签： flaskbootstrap-4jinja2

解决方案

我已经让它工作了。仍然不是正确的解决方案。我为 popover show 事件创建了一个侦听器，在该事件中它获取 event.currentTarget 的数据 ID 并设置表单输入字段。

$("[data-toggle=popover]").on('show.bs.popover', function (event) {
    var edititem = event.currentTarget.attributes['data-id'];
    $(".input-group input").val( edititem.value );
});

推荐阅读