Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.05.2018, 18:16
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

как получить 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">&times;</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>

Последний раз редактировалось booratina, 08.05.2018 в 19:13.
Ответить с цитированием
  #2 (permalink)  
Старый 08.05.2018, 18:22
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Нужно показывать html код. А вот в JS не зачем терзать DOM по много раз:

var el = $(this).closest('.shown').find('td'),
    //а затем уже из это коллекции брать необходимое
    nameSize = el.eq(0).text(),
    kitchenSize = .....
Ответить с цитированием
  #3 (permalink)  
Старый 08.05.2018, 18:44
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Добавил html
Ответить с цитированием
  #4 (permalink)  
Старый 08.05.2018, 18:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

$(this).closest('.shown').find('td:eq(0)') - ищутся ячейки таблицы (а что в таблице одна строка?), и далее какая-то проблема, а где код таблицы?

Если получить чекбокс, это его значение и который в третей ячейке, то el.eq(2).find('input').val(), или подобное.
Ответить с цитированием
  #5 (permalink)  
Старый 08.05.2018, 19:07
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Обновил! Таблица формируется динамически (вы мне помогали в другой теме тоже по причине чекбокса )
https://javascript.ru/forum/jquery/7...server-bd.html

3-е значение в таблице это checkbox тип boolean и я хочу при вызове модалки увидеть что галочка стоит или нет (в зависимости true or false)

Последний раз редактировалось booratina, 08.05.2018 в 19:24.
Ответить с цитированием
  #6 (permalink)  
Старый 08.05.2018, 19:25
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от booratina
Таблица формируется динамически
И что? Открываем отладчик, копируем и вставляем на форуме.

Если таблица, то сколько в ней строк, ячеек и флажков? Правильно, много. А какие вы получаете, или же ссылка в каждой строке, а класс "shown", это TR? Тогда все верно, и как показано. Иначе то возвращаться будет только из первой строки таблицы.
Ответить с цитированием
  #7 (permalink)  
Старый 08.05.2018, 19:29
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

<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>
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2018, 19:34
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Сделал так
var defaultSize = el.eq(2).find('input').val();

возвращает не true/false в "on"
Ответить с цитированием
  #9 (permalink)  
Старый 08.05.2018, 19:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

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() {

И где в таблице флажки?
Ответить с цитированием
  #10 (permalink)  
Старый 08.05.2018, 19:59
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

тут коряво написано но если я уберу 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 Как правильно его получить?

Последний раз редактировалось booratina, 08.05.2018 в 20:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как получить innerHTML при клике prope Общие вопросы Javascript 3 10.01.2014 17:13
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как вывести дату, чтобы не повторять скрипт пару раз xXapokalypsesXx Общие вопросы Javascript 10 27.06.2013 13:43
Как получить цвет пиксела на картинке в заданых кординатах? Kvark jQuery 7 07.06.2013 14:22