как получить checkbox и вывести на модалку?
Таблица
success: function (data) {
for (var i = 0; i < data.length; i++) {
var trimName = name.replace(/\s+/g, '');
var tr = $('.active').closest('tr').index();
$('<tr class="shown ' + trimName + '">' +
'<td>' + data[i].nameSize + '</td>' +
'<td>' + data[i].kitchenSize + '</td>' +
'<td><input type="checkbox" class="activated" '+(data[i].defaultSize ? 'checked' : '' )+'></td>' +
'<td>' +
'<a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"></i></a>' +
// '<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true" onclick="deleteValues()"></i></a></td>' +
'</tr>').insertAfter($('tr:eq(' + (tr + 1) + ')')
);
}
},
function sendValuesToModal() {
$('a').on('click', function() {
var nameSize = $(this).closest('.shown').find('td:eq(0)').text();
var kitchenSize = $(this).closest('.shown').find('td:eq(1)').text();
var defaultSize = $(this).closest('.shown').find('td:eq(2)'); // тут не получается
alert(defaultSize);
$('#editValues').modal('show');
$("input[name=nameSize]").val(nameSize);
$("input[name=kitchenSize]").val(kitchenSize);
$("input[name=defaultSize]").val(defaultSize); // и тут тоже
});
}
<div class="container-fluid">
<div class="row">
<table class="table table-hover table-responsive">
<thead>
<tr class=".info">
<th>Название</th>
<th>Название для кухни</th>
<th>По умолчанию</th>
</tr>
</thead>
<tbody id="records_table">
<tr th:each ="scale : ${scale}" >
<td th:inline="text" class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i>
[[${scale.nameScale}]]
</td>
<td>
<!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>-->
</td>
<td></td>
<td>
<button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Modal window update Values-->
<div id="editValues" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Редактировать значения шкалы размеров</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="nameSize">Введите название размера:</label>
<input class="form-control" type="text" id="editNameSize" required="required" name="nameSize">
</div>
<div class="form-group">
<label for="kitchenSize">Введите название для кухни:</label>
<input class="form-control" type="text" id="editKitchenSize" required="required" name="kitchenSize">
</div>
<div class="form-group">
<label for="defaultSize">Установить шкалу по умолчанию:</label>
<input class="form-control" type="checkbox" id="editDefaultSize" required="required" name="defaultSize">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" onclick="editValues()">Сохранить</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
|
Нужно показывать html код. А вот в JS не зачем терзать DOM по много раз:
var el = $(this).closest('.shown').find('td'),
//а затем уже из это коллекции брать необходимое
nameSize = el.eq(0).text(),
kitchenSize = .....
|
Добавил html
|
$(this).closest('.shown').find('td:eq(0)') - ищутся ячейки таблицы (а что в таблице одна строка?), и далее какая-то проблема, а где код таблицы?
Если получить чекбокс, это его значение и который в третей ячейке, то el.eq(2).find('input').val(), или подобное. |
Обновил! Таблица формируется динамически (вы мне помогали в другой теме тоже по причине чекбокса :) )
https://javascript.ru/forum/jquery/7...server-bd.html 3-е значение в таблице это checkbox тип boolean и я хочу при вызове модалки увидеть что галочка стоит или нет (в зависимости true or false) |
Цитата:
Если таблица, то сколько в ней строк, ячеек и флажков? Правильно, много. А какие вы получаете, или же ссылка в каждой строке, а класс "shown", это TR? Тогда все верно, и как показано. Иначе то возвращаться будет только из первой строки таблицы. |
<table class="table table-hover table-responsive">
<thead>
<tr class=".info">
<th>Название</th>
<th>Название для кухни</th>
<th>По умолчанию</th>
</tr>
</thead>
<tbody id="records_table">
<tr>
<td class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i>
Обьем бутылок
</td>
<td>
<!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>-->
</td>
<td></td>
<td>
<button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button>
</td>
</tr>
<tr>
<td class="selectView"><i class="fa fa-angle-right" aria-hidden="true"></i>
Размер пиццы
</td>
<td>
<!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>-->
</td>
<td></td>
<td>
<button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button>
</td>
</tr>
<tr class="opened">
<td class="selectView active"><i class="fa fa-angle-right fal fa-angle-down" aria-hidden="true"></i>
Вес товара
</td>
<td>
<!--<a class="btn btn-success btn-sm" href="#"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger btn-sm" href="#"><i class="fa fa-trash" aria-hidden="true"></i></a>-->
</td>
<td></td>
<td>
<button class="btn .btn-primary btn-sm" data-toggle="modal" data-target="#values"><span class="fa fa-plus" aria-hidden="true"></span></button>
</td>
</tr><tr class="shown Вестовара item-active"><td>100 грамм</td><td>100 гр.</td><td><input type="checkbox" class="activated"></td><td><a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"></i></a></td></tr>
</tbody>
</table>
|
Сделал так
var defaultSize = el.eq(2).find('input').val();
возвращает не true/false в "on" |
class="shown Вестовара item-active" - это что за кошмар?
<a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" onclick="sendValuesToModal()"> Тогда что это такое: function sendValuesToModal() { $('a').on('click', function() { И где в таблице флажки? |
тут коряво написано но если я уберу trimName то таблица не будет сворачиваться в виде выпадающего списка а будет копировать кучу строк вниз
$('<tr class="shown ' + trimName + '">' +
class="shown Вестовара item-active" - это что за кошмар? Это кнопка редактировать строчку, которая перенаправляет в функцию в которой мы собираем из строчки 2 - String 1- boolean <a class="btn .btn-primary btn-sm editValues" href="#"><i class="fa fa-pencil" aria-hidden="true" [color="red"]onclick="sendValuesToModal()" Тогда что это такое: удалил function sendValuesToModal() { $('a').on('click', function() { И где в таблице флажки? вот один флажок data[i].defaultSize <td>' + data[i].nameSize + '</td>' + '<td>' + data[i].kitchenSize + '</td>' + '<td><input type="checkbox" class="activated" '+(data[i].defaultSize ? 'checked' : '' )+'></td>' + Одним словом
var el = $(this).closest('.shown').find('td');
var nameSize = el.eq(0).text();
var kitchenSize = el.eq(1).text();
var defaultSize = el.eq(2).text(); //здесь .text(); не уместен т.к это checkbox Как правильно его получить?
|
Цитата:
Цитата:
Но, в таблице то кроме этих кнопок есть и та, что не относится по назначению к этим - btn .btn-primary. Кстати, точки в имени класса в таком виде быть не должно. И вообще, если из одного копируется в другое, то это скорее бесполезное занятие. |
Вложений: 3
Цитата:
function sendValuesToModal() {
var el = $(this).closest('.shown').find('td');
var nameSize = el.eq(0).text();
var kitchenSize = el.eq(1).text();
var defaultSize = el.eq(2).find('input').val() //вроде так сделал
alert(defaultSize);
$('#editValues').modal('show');
$("input[name=nameSize]").val(nameSize);
$("input[name=kitchenSize]").val(kitchenSize);
$("input[name=defaultSize]").val(defaultSize);
}
|
Сделал так
var defaultSize = el.eq(2).find('input').prop('checked');
получается получить true/false НО в модалке не устанавливается
$("input[name=defaultSize]").val(defaultSize);
|
Если нужно состояние флажка установить, то $("input[name=defaultSize]").prop('checked', defaultSize);
Какую задачу преследует скрипт? |
скрипт берет состояние флажка у таблицы и передает модалке, которая отправит данные на другой скрипт где с помощью ajax отправим данные на сервер чтоб обновить (отредактировать, изменить) данные в БД!
Одним словом мы выполняем редактирование строчки! |
Если ваша страница изолированная и в ней кроме как в таблице больше нет элементов A, тогда можно было бы закрыть глаза на это ('a').on('click', function(). Но это ведь не так, а следовательно это чревато чем?
Если с сервера запрашивают данные для редактирования, то это уже должна быть форма, копировать нечто в какую-то левую форму нет никакой необходимости. А флажок (его состояние), который в общем то не передается на сервер если не выбран, копировать в другой, это полнейшая глупость. Ну и судя по таблице такие данные вполне может обновлять группой, то есть какого-то посредника не треубется. |
Вложений: 1
Цитата:
$('a').on('click', function() {
Я получается буду кликать на всю строку!Цитата:
Цитата:
Как показано на картинке мне по клику на карандашек нужно вызвать модальное окно в котором по хорошем должна быть форма. Но я не пойму как в нее собрать нужные мне данные. |
Цитата:
Кроме того, у вас многократно устанавливается этот обработчик в функции sendValuesToModal, а нужно устанавливать единожды или делегировать обработку родителю. Кроме этого сама логика "открыть окно одной кнопкой, щелкнуть и скопировать множеством" имеет существенный недостаток - таблица открыта и щелкнуть можно в любой момент, и совсем не по кнопке "открыть окно". А это уже баг. А по разумному, в таком случае, кнопки "открыть окно" вообще не должно быть, оно должно открываться по тегам А, которые и инициализируют копирование из выбранной строки. Но в общем то этого и не требуется, каких-то окон. Достаточно оформить эту таблицу уже содержащую элементы формы. Если объем данных большой, типы данных разнообразные, тогда эти данные редактируются индивидуально. Но если это к промеру именование, цена, какой-то флажок, то можно изменить/выбрать во множестве полей и отправить форму. От JS тут ничего в общем и не потребуется, кроме если форма отправляется асинхронным запросом. Вся работа ляжет на сервер, а для него обновить данные множества записей в таблице не является проблемой. |
| Часовой пояс GMT +3, время: 13:00. |