Как передать список проверенных флажков через модальный JQuery Flask для подтверждения - PullRequest
Новая
       7

Как передать список проверенных флажков через модальный JQuery Flask для подтверждения

0 голосов
/ 07 марта 2019

Я пытаюсь создать страницу, где пользователь может удалить несколько записей.Эти записи находятся в таблице и генерируются через цикл jinja2 for.Каждый из них имеет флажок в виде строки таблицы с record_id в качестве значения.Я застрял, пытаясь передать список проверенных значений (record_ids) модальному.Хотя я смог передать переменные в модальное поле либо через поле модального идентификатора, либо через data-yourparameter, я не могу найти способ передать список значений, которые были проверены.Я думаю, что хитрость где-то в JQuery, но я очень мало знаю об этом.Моя цель состоит в том, чтобы каким-то образом передать этот список значений отмеченных флажков на вход pass_checkedvalue в модале.

Любая помощь очень ценится!

Вот что я пробовал до сих пор:

HTML: 

 <form name="table-form" method="POST">
  {% for record in table %}
    <tr>
    <td> <input type="checkbox" name="checked[]" value="{{ record.id }}"> 
    </td>
    <td>{{record.name}}</td>
    </tr>
    {% endfor %}
    <a data-toggle="modal" class="btn btn-primary" id="btn_multidelete" value="btn_display_value" data-target="#multiconfirm-modal"> Delete selected</a>
    </form>


<!-- Modal for Confirm Multi-Delete popup-->
<div class="modal" tabindex="-1" role="dialog" id="multiconfirm-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these API users?</p>
</div>
<div class="modal-footer align-items-start">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="{{ url_for('multidelete') }}" method="POST">
<input name="pass_checkedvalue" type="hidden" value="pass_checkedvalue" id="hidden_checkedinput">
<input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
    </form>
</div>
</div>
</div>
</div>

JQuery-скрипт: 

<!-- This script allows checked values to be passed to multi-confirm modal  -->
<script>
$('#multiconfirm-modal').on('show.bs.modal', function(e) {
var checkedvalue = $('.checked[]:checked').val();
$('#hidden_checkedinput').val(checkedvalue)
});

1 Ответ

0 голосов
/ 07 марта 2019

Поставьте класс на флажки (я поставил record), а затем выберите все проверяемые записи, отобразите их значения в массив, а затем объедините этот массив в одну строку, чтобы поместить в скрытую переменную.

$('#multiconfirm-modal').on('show.bs.modal', function(e) {
  var checkedValues = $('.record:checked').map(function(){ return this.value; }).get();
  //put the ids in the hidden input as a comma separated string
  $('#hidden_checkedinput').val(checkedValues.join(','));
});
<form name="table-form" method="POST">
  {% for record in table %}
  <tr>
    <td> <input type="checkbox" class="record" name="checked[]" value="{{ record.id }}">
    </td>
    <td>{{record.name}}</td>
  </tr>
  {% endfor %}
  <a data-toggle="modal" class="btn btn-primary" id="btn_multidelete" value="btn_display_value" data-target="#multiconfirm-modal"> Delete selected</a>
</form>
...