Javascript.RU

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

Как установить динамического checkbox (jQuery-Сервер-БД)
Получаю данные с сервера (Java-SpringBoot)
в .ajax строю в цикле <td> и <input type="checkbox">
Как сделать чтоб в зависимости от ответа сервера (true/false) ставилась галочка или нет!

var csrfToken = $("meta[name='_csrf']").attr("content");
var csrfHeader = $("meta[name='_csrf_header']").attr("content");


$(document).ready(function () {
    $('.selectView').click(function () {
        var nameNotTrimmed = $(this).text();
        var name = $.trim(nameNotTrimmed);
        console.log(name);

        if ($(this).closest('tr').hasClass('opened')) {
            var trimName = name.replace(/\s+/g, '');
            $('.' + trimName + '').closest('tr').each(function () {
                $(this).remove();
            });
            $(this).closest('tr').find('i').removeClass('fa fa-minus-square-o').addClass('fa fa-plus-square-o');
            $(this).closest('tr').removeClass('opened');
            return;
        }


        $('tr .active').removeClass('active');
        $(this).addClass('active').siblings().removeClass('active');
        $(this).closest('tr').addClass('opened');
        $(this).closest('tr').find('i').removeClass('fa fa-plus-square-o').addClass('fa fa-minus-square-o');

        $.ajax({
            type: "POST",
            url: "/scale_of_size/getValues",
            data: {scaleName: name},
            beforeSend: function (xhr) {
                xhr.setRequestHeader(csrfHeader, csrfToken);
            },
            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="sizeDef"></td>' +
                        '</tr>').insertAfter($('tr:eq(' + (tr + 1) + ')'));

                    //checkCheckbox(data);
                    $(".sizeDef").prop("checked", data[i].defaultSize);
                }


            },
            error: function (e) {
                alert("error")
            }
        });

    });
});


function checkCheckbox(data) {
    $(".size").prop("checked", data[i].defaultSize);
}




<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-plus-square-o" aria-hidden="true"></i>
                    [[${scale.nameScale}]]
                </td>
                <td></td>
                <td></td>
                <td>
                    <button  class="btn btn-default values" data-toggle="modal" data-target="#values">Добавить значение шкалы</button>
                </td>
            </tr>
            </tbody>
        </table>

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

Сообщение от booratina
Как сделать чтоб в зависимости от ответа сервера (true/false)
defaultSize - это есть true/false?
Ответить с цитированием
  #3 (permalink)  
Старый 06.05.2018, 09:58
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

да, это boolean значение получаемое от сервера!
Сообщение от laimas Посмотреть сообщение
defaultSize - это есть true/false?
Ответить с цитированием
  #4 (permalink)  
Старый 06.05.2018, 10:00
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Если это действительно булево значение, то $(".sizeDef").prop("checked", data[i].defaultSize); и выполнит необходимое. Если этого не происходит, то значит, это не так, но в таком случае data не может быть объектом.
Ответить с цитированием
  #5 (permalink)  
Старый 06.05.2018, 10:10
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

Сообщение от laimas Посмотреть сообщение
Если это действительно булево значение, то $(".sizeDef").prop("checked", data[i].defaultSize); и выполнит необходимое. Если этого не происходит, то значит, это не так, но в таком случае data не может быть объектом.
Я обновил js код в начале сообщения!
Проблема в том что когда я за хожу на страницу то везде unchecked
Кликаю на второе поле и checked устанавливается во всех полях!
Одним словом оно не учитывает данные сервера а реагирует на клик на $('tr .active')
Ответить с цитированием
  #6 (permalink)  
Старый 06.05.2018, 10:23
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Запутался )

Если при получении страницы определить состояния, то выполните функцию checkCheckbox, причем тут data не понятно, вызова не видно ее в ajax запросе.

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

Сообщение от laimas Посмотреть сообщение
Запутался )

Если при получении страницы определить состояния, то выполните функцию checkCheckbox, причем тут data не понятно, вызова не видно ее в ajax запросе.
Тут я прошу сервер мне вернуть по заданому УРЛ объект по имени
url: "/scale_of_size/getValues",
data: {scaleName: name},

Тут я его получаю и достаю поля обьекта
success: function (data)

поля обьекта
data[i].nameSize - название размера String
data[i].kitchenSize - название размера для кухни String
data[i].defaultSize - размер по умолчанию boolean

Из того что вернул сервак я засовываю в <td>
Ответить с цитированием
  #8 (permalink)  
Старый 06.05.2018, 11:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Это у вас выполняется по ответу сервера:

//checkCheckbox(data);
$(".sizeDef").prop("checked", data[i].defaultSize);

и коли data[i].defaultSize булево значение, то указанный флажок примет соответствующее состояние.

А те что при загрузке не устанавливаются "Проблема в том что когда я за хожу на страницу то везде unchecked", то выполняйте checkCheckbox(data), но откуда возьмется data?

Либо сервер должен в атрибутах указать состояние флажков, либо объект с данными отдавайте клиенту, выполняя на нем checkCheckbox(data).
Ответить с цитированием
  #9 (permalink)  
Старый 06.05.2018, 13:26
Интересующийся
Отправить личное сообщение для booratina Посмотреть профиль Найти все сообщения от booratina
 
Регистрация: 06.05.2018
Сообщений: 23

1.Как вы можете видеть в цикле мы рисуем <td> (строчки в таблице)
<td>data[i].nameSize</td>
<td>data[i].kitchenSize</td>
<td>data[i].defaultSize</td>

2.на страницу выводит то что пришло с сервера
-Имя
-имя для кухни
-true

Делаю так
<td>data[i].nameSize</td>
<td>data[i].kitchenSize</td>
<td><input type="checkbox" class="sizeDef"></td>
checkCheckbox(data);

и связываю функцией мой чек бокс
function checkCheckbox(data) {
$(".size").prop("checked", data[i].defaultSize);

помещаю это в цикл

Но не работает! сервер передает нормально true/false в зависимости от состояния в БД А Вот на странице не правильно

Когда делаю как указано в пункте 1-2 норм выводит true/false но это не checkbox
Изображения:
Тип файла: jpg Снимок.JPG (18.4 Кб, 2 просмотров)

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

Можно и так

<input type="checkbox" class="sizeDef" '+(data[i].defaultSize ? 'checked' : '' )+'>


а вот функцией, то в функцию нужно передавать текущий добавляемый флажок и его состояние. А у вас состояние data[i].defaultSize получат все флажки имеющиеся на странице.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как установить задержку исполнения на jQuery? walabyn jQuery 3 20.09.2020 19:15
Как получить в JQUERY каждую строку как отдельный объект? Alex1233 Общие вопросы Javascript 3 22.08.2014 06:54
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Подскажите как вызвать функцию jQuery по клику checkbox shurek Общие вопросы Javascript 4 26.07.2013 15:27