Передача значений в поповер Bootstrap4 - PullRequest
Новая
       7

Передача значений в поповер Bootstrap4

0 голосов
/ 01 ноября 2019

У меня есть таблица визуализации цикла (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>

1 Ответ

0 голосов
/ 01 ноября 2019

У меня это работает. Все еще не правильное решение. Я создал прослушиватель для события popover show, в котором он получает идентификатор данных для event.currentTarget и устанавливает поле ввода формы. 

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