Ответы пользователя по тегу JavaScript
  • Как с помощью serialize получить данные форм с чекбоксами при изменение чекбокса?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Просто по-человечески попробуйте использовать is:checked подобно этому:

    if ($('#checkbox').is(':checked')){
    	// ...
    }
    Ответ написан
    2 комментария
  • Как удалить элемент из массива в local storage по его индексу?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    localStorage.removeItem('productInfo')
    Ответ написан
  • Как задать img источник из svg inline?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Вы можете вывести изображение в формате svg прямо а html разметку и работать с ним± как с img. Попробуйте открыть svg в любом редакторе текста/кода и перекопировать его содержимое в свой html. Так же рекоменду почитать про svg хотя бы в этой статье
    Ответ написан
  • Как изменить объект с вложенными свойствами?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Прочитал комментарии, могу предложить такой вариант:

    function increaseValues(obj) {
        // Увеличиваем значение value и присваиваем ему activeValue + 1
        if (obj.hasOwnProperty('value')) {
            obj.value = obj.user.activeValue + 1;
        }
        // Рекурсивно вызываем функцию для всех вложенных объектов
        for (let key in obj) {
            if (typeof obj[key] === 'object') {
                increaseValues(obj[key]);
            }
        }
    }
    
    const obj = {
        user: {
            activeValue: 2,
            accountList: {
                112211: {
                    value: 1,
                },
                112212: {
                    value: 2,
                },
            },
        },
    };
    
    increaseValues(obj);
    console.log(obj);
    Ответ написан
    2 комментария
  • Как получить текст ответа ASP Net Core API?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Основным методом общения между клиентом и сервером являются Status Code. Зачем вам передавать точное описание, что там оно не нашло, если вы можете просто передавать 404 и клиент пусть сам генерирует себе ошибку.

    Вообще забудьте про этот бред return StatusCode. Есть нормальные методы StatusResult к которым относятся Ok(), BadRequest() и тот же NotFound(). В эти методы можете передавать какие-то мета-данные если вам нужно. Либо можете использовать Response.Headers. Но если вам прям очень-очень нужно впихнуть туда вот это вообще об ошибке, так что бы ваш сервер был на все руки мастер, можете сделать что-то типа такого:

    return NotFound(new { message = "Omg, Not Found!!!" });


    UPD:
    Как на клиенте через JS вытянуть ошибку? Я бы использовал просто ajax:

    $.ajax({
        url: '...',
        method: 'get',
        success: (response): {
            let data = JSON.parse(response.responseText);
            console.log(data.message); //Omg, Not Found!!!
        }
    });
    Ответ написан
    3 комментария
  • Почему не работает поиск по классу?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Обратите внимание, что есть методы который .getElemtByX(), а есть .getElemtsByX(). Логично предположить, что .getElements() будет возвращать вам массив элементов, по этому эта строка у вас и не работает:

    document.getElementsByClassName('child2').textContent = 'Измененная строка 2'; // не работает!
    Ответ написан
    5 комментариев
  • Не работает js на jquery-3.7.0?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    В вашем коде вы используете неправильные имена обработчиков для успеха и ошибки ajax-запроса. Вместо done и fail используйте success и error, соответственно.

    UPD:
    Вот стандартный пример ajax-запроса:
    $.ajax({
        url: 'https://domain.com/router/',
        method: 'post', // NOT A TYPE
        data: JSON.stringify({ ... }),
        dataType: 'application/json; charset=utf-8',
        success: (response) => { ... },
        error: (response) => { ... }
    })


    .done и .fail срабатываю, когда у вас получилось либо не получилось сделать запрос. success и error срабатывают в зависимости от ответа сервера.
    Ответ написан
    2 комментария
  • Как сделать изначалаьно открытое модальное окно на бутстрап 5?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    В верхний div добавьте класс show и стиль display: block вот так:

    <div class="modal fade class" id="exampleModal" style="display: block">
    Ответ написан
    Комментировать
  • Как решить зависимость класса от другого класса?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Может какой-то Dependency Injection?)

    Вообще, если у вас два класса столь "плотно" зависят друг от друга, значит их общую зависимость нужно вынести в другой класс
    Ответ написан
    Комментировать
  • Как сделать функцию ping?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Я вообще лучше бы использовал какой-то SignalR, который бы "тыкал" клиента. Если клиент отвечает - значит жив ¯\_(ツ)_/¯
    Ответ написан
    1 комментарий
  • Как в скрипте указать class с любой цифрой на конце?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Можно сделать выборку по классам:
    let items = document.querySelectorAll("[class^='filter-block']")
    let items.forEeach(item => {
        // ...
    });


    [class^='filter-block'] означает, что вы будете делать выборку по всем элементам, у которых значение указанного аттрибута (В нашем случае, мы указали аттрибут class) будет начинаться (Это делается при помощи такой конструкции как ^= ) с указанного значения (Мы указали filter-block), после которого могут следовать другие символы (Т.е. filter-block2, filter-block-filter-block-filter-block, filter-block-123, filter-blockkkkkkkkkkkkkkkkk и так далее, это всё будет проходить через выборку, т.к. имеет общее начало filter-block)
    Ответ написан
  • Почему при навигации между компонентами в Blazor не погружается JS код?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    В blazor использовать кастомные JS скрипты немного сложнее чем вы думаете. Там нужно использовать такую штуку как JSRuntime. А вообще советую прочитать эту статью про JS Interop
    Ответ написан
    Комментировать
  • Как сделать, чтобы yandex maps не выходил за пределы div?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Скорее всего внутренние элементы имеют ширину больше, чем 100%-я ширина блока. Смотрите в инспекторе
    Ответ написан
    1 комментарий
  • Как создать скрытый input для передачи технической информации на другую страницу?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Тип hidden не подходит, потому что его можно редактировать? А что из html вы вообще можете НЕ редактировать?

    Вам тут стоит понять одну очень важную штуку: html/css/js образуют client side. Вы должны понимать, почему это называется вообще "Клиентом"? Потому что эта вся информация полностью загружается на клиента и он имеет к ней доступ.

    По этому существует server side - часть программной системы, к какой конечный пользователь не имеет доступа, в отличии от клиентской части.

    Цель сервера - обрабатывать запросы с клиента. Первое, что делает сервер с данными, которые ему отправил клиент - ВАЛИДИРУЕТ. Соответственно, если данные не валидны - запрос разворачивается обратно на клиента и отдаёт ему какую-то ошибку

    Это всё так, к слову. Вам важно понять, что клиент может редактироваться, вы никак не сможете этого избежать. Но этого не стоит бояться, т.к. то, за что вы переживаете должно обрабатываться на сервере.

    Client side должен обрабатывать данные перед отправкой на сервер (Но сервер обязан их повторно валидовать) и после получения данных от сервера для наилучшего представления ИХ конечному пользователю

    UPD: для справки. Вы можете полностью редактировать html в режиме реального времени, но он не будет сохранён для всех пользователей, а только для вас, т.к. эта часть загружается только два вас как для конечного пользователя. Сам html хранится на сервере и является результатом работы сервера. Эту часть html, что вы видите в браузере вы можете редактировать.

    Вы можете динамически подключать стили или их удалять. Можете менять скрипты, удалять их из сайта (Тогда отправка вообще работать не будет и, соответсвенно, отключится весь функционал, за который отвечаел скрипт) или добавить новые скрипты. А можете вообще написать свой скрипт прямо в консоли браузера и он будет работать.

    Проблема в том, что даже после элементарной перезагрузки страницы (Через Ctrl + R или другими способами) это всё будет утеряно и вам загрузится тот самый html/css/js, который является результатом рабыты сервера того сайта, который вы просматриваете
    Ответ написан
    1 комментарий
  • Как предотвратить бесконечную загрузку страницы при отправке post запроса?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Ну... Вот структура ajax скрипта для post запроса (Только вам нужно сначала ещё подключить jQuery, потому что ajax является частью библиотеки jQuery):

    let data = { prop: value }
    let jsonData = JSON.stringify(data)
    
    $.ajax({
         url: 'https://domain.com/route/to/endpoint/',
         method: 'post',
         data: jsonData,
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         success: (response) = { console.log(response) }, // catch Ok
         error: (response) => { console.log(response) } // catch other (BadRequest, NotFound e.t.c)
    })


    Этот скрипт будет выполняться асинхронно и пользователю не придётся ждать его завершения, а когда запрос будет выполнен, вы сможете его обработать в блоках success и error
    Ответ написан
    3 комментария
  • Не работает метод querySelectorAll, как исправить?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    document.querySelectorAll('.menu-button') возвращает массив элементов, а не один элемент. В вашем случае нужно так:

    let buttons = document.querySelectorAll('.menu-button')
    buttons.forEach(btn => {
         btn.onclick = () => {...}
    });


    Или другой вариант для вас, вам нужно использовать не document.querySelectorAll('.menu-button'), а
    document.querySelector('.menu-button').onclick = () => { ... }
    Ответ написан
  • Как исправить ошибку при подключении библиотеки?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Если я не ошибаюсь, когда вы делаете npm install с использованием символа @, вы устанавливаете часть библиотеки, а не всю библиотеку
    Ответ написан
  • Как задать плееру автоматическое воспроизведение при нажатии на сылку?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Попробуйте вот такую комбинацию с помощью JS:

    <video id="myVideo" autoplay>
              <source src="your_video.mp4" type="video/mp4">
         </video>


    document.getElementById('myVideo').play();

    А для модалок вот так:
    <a href="#" onclick="openModal()">Открыть видео</a>
    
    <!-- Модальное окно -->
    <div class="overlay" id="video1">
        <div class="modal">
            <div class="video__title">
            </div>
            <div class="video" id="youtube">
                <iframe width="640" height="360" id="player" src="https://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
            <a href="#" onclick="closeModal()" class="close">Закрыть</a>
        </div>
    </div>
    
    <script type="text/javascript" src="http://www.youtube.com/player_api"></script>


    var player;
    
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
                events: {
                    'onReady': onPlayerReady
                }
            });
        }
    
        function onPlayerReady(event) {
            event.target.playVideo();
        }
    
        function openModal() {
            document.getElementById('video1').style.display = 'block';
        }
    
        function closeModal() {
            document.getElementById('video1').style.display = 'none';
            player.stopVideo();
        }
    Ответ написан
    Комментировать
  • Получил ошибку при парсинге json, но не могу найти где в json не такое поле. Как решить?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    Так вам пишет, что проблема при парсинге "[object Object]" (Который является строковым представлением JS объекта)

    Вот стандартная структура для fetch get запроса:
    let response = await fetch('https://url.address.com/routes/') <-- получаем "ответ"
    let data = await response.json() <-- получаем данные в формает json


    В вашем случае, вы этот объект data дальше пытаетесь пропарсить через JSON.parse(...).

    Если вы учили JavaScript, вы должны знать, что [object Object] это строковое представление JS объекта, тогда у вас не было бы проблемы с поиском ошибки, но вы пропустили изучение JS и перешли сразу к api и запросам на api, отсюда и получаете результат
    Ответ написан
    1 комментарий
  • Как открыть модальное окно bootstrap при навидению?

    NikFaraday
    @NikFaraday
    Student full-stack Developer
    <input type='hidden' id='open-modal' data-toggle='#modal' data-target='#modal-id' />


    let isOpen = false;
    $('#item-to-open-modal').on('mouseenter', () => {
       if (!isOpen) {
          document.getElementById('open-modal').click()
          isOpen = true;
       }
    })
    
    $('#item-to-open-modal').on('mouseleave', () => {
       if (isOpen) {
          document.getElementById('close-modal').click()
          isOpen = false
       }
    })
    Ответ написан