Ответы пользователя по тегу JavaScript
  • Как вернуть страницу без перезагрузки?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Перед тем, как выполнять этот код запиши содержимое страницы в переменную, только потом запускай:
    page = $('html').html(); // Сохраняем страницу в переменную page
    
    $('html').html('<head><title>' + translations['core.no_internet_connection'] + '</title></head><body><div style="font: 12pt/10pt sans-serif; margin-top: 200px; text-align: center;"><p>' + options['siteName'] + '</p>' + translations['core.no_internet_connection'] + '</div></body>');
    
    // Ставим таймер:
    setTimeout(funvtion() {
        $('html').html(page); // Спустя 5 сек. записываем содержимое переменной обратно на страницу
    }, 5000);
    Ответ написан
    Комментировать
  • Почему в объекте Response нет самого ответа?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Потому что может возникнуть необходимость читать поступающие данные сразу по мере их поступления:
    https://learn.javascript.ru/fetch-progress
    https://developer.mozilla.org/en-US/docs/Web/API/R...
    Не ожидая завершения запроса.
    Ответ написан
    Комментировать
  • Почему не работает проверка на наличие класса jquery?

    zkrvndm
    @zkrvndm
    Архитектор решений
    <div class="cityWrapper" onclick="$('.city__dropdown').toggle();"></div>

    jQuery метод .toggle() позволяет отобразить или скрыть выбранные элементы. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.
    Ответ написан
    Комментировать
  • Как можно проще сделать проверку авторизации?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Валидацию желательно делать на стороне сервера. Все эти сообщения о том, что почта или пароль кривые должен выдавать сервер. Потому что скрипты на стороне браузера можно обмануть и отправить вам на сервер абракадабру, которую тот успешно сожрет и подавится, так как валидации на стороне сервера у вас внезапно нет.
    Ответ написан
  • Как визуализировать работу цикла в элементе html?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Так ты хотя бы задержку какую-то задай в цикле:
    window.onload = function () {
    
        let line = document.querySelector('#line');
    
        async function animateLine() {
            let n = 10000;
    
            let step = 100 / n;
            let output_step = 0;
    
    
            for (i = 0; i < n; i++) {
                output_step += step;
                line.style.width = output_step + "%";
                console.log(output_step);
                await new Promise(function(s) { setTimeout(s, 100); }); // Пауза в 100 мс.
            }
        }
        animateLine();
    }
    Ответ написан
    Комментировать
  • Как мне сделать валидацию этой формы?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Атрибут pattern и псевдо классы :valid :invalid в помощь.

    htmlbook.ru/html/input/pattern
    https://developer.mozilla.org/ru/docs/Web/CSS/:invalid
    Ответ написан
    Комментировать
  • Как преобразовать curl с параметром --data в fetch с методом get?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуй так:
    (async function() {
    	
    	try {
    		
    		var response = await (await fetch('http://127.0.0.1:8000/api/feed/posts/', {
    			method: 'POST',
    			headers: {
    				'Authorization': 'Token a96a3545bb566272f0fdfb405a0cccb7173da660',
    				'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    			},
    			body: 'page=1'
    		})).text();
    		
    		console.log('Запрос успешно отправлен, ответ сервера:');
    		console.log(response);
    		
    	}
    	
    	catch(err) {
    		
    		console.log('Запрос завершился неудачно, детали ниже:');
    		console.error(err);
    		
    	}
    	
    })();
    Ответ написан
    Комментировать
  • Как можно сделать такую загрузку файлов?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Заведи массив, при выборе нового файла в этот массив сохраняй выбранный файл. Напишу функцию, которая перебирает массив и отрисовывает изображения - эту функцию вызываешь каждый раз после добавления файла. При нажатии на крестик удаляешь из массива файл и вызываешь эту же функцию.

    Когда придет время отправлять файлы их легко можно отослать при помощи AJAX и new FormData()
    Ответ написан
    Комментировать
  • Async/await в fetch?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Откройте консоль и выполните:
    async function getIp(){
    	
    	// Блок try выполнится полностью, если не будет ошибок:
    	
    	try {
    		
    		// Выполняем первый запрос:
    		
    		var response1 = await (await fetch('https://json.geoiplookup.io/')).json();
    		
    		// Выполняем второй запрос используя данные с первого:
    		
    		var response2 = await (await fetch('https://ipapi.co/'+response1.ip+'/json/')).json();
    		
    		return response2; // Возвращаем результат второго запроса
    		
    	}
    	
    	// Блок catch сработает только если будут какие-то ошибки в блоке try:
    	
    	catch(err) {
    		
    		// Выведем в консоли информацию об ошибке:
    		
    		console.log('При запросе IP произошла ошибка, детали ниже:');
    		console.error(err);
    		
    		// Вернем исключение с текстом поясняющим детали ошибки:
    		
    		throw new Error('Один из запросов завершился неудачно =(');
    		
    	}
    	
    }
    
    // Вызовем функцию:
    
    var info = await getIp();
    
    // Выведем результат:
    
    console.log('Результаты запроса IP ниже:');
    console.dir(info);

    Код раскомментирован, думаю все понятно. Отдельно замечу, что если вы будете вызывать await getIp(); не в консоли, а где-то внутри другой функции, то эта функция обязательна должна иметь приставку async, иначе получите ошибку. Например, вам надо вызывать эту функцию внутри функции test() тогда не забудьте к ней добавить async:
    async function test() {
    	
    	// ... ваш код
    	
    	var info = await getIp();
    	
    	// ... ваш код
    	
    }

    Учебник:
    https://learn.javascript.ru/async-await
    Ответ написан
  • Существует ли аналог Promise.allSettled для jQuery.Deferred?

    zkrvndm
    @zkrvndm Автор вопроса
    Архитектор решений
    Я понял в чем был не прав. В случае с jQuery никаких аналогов Promise.allSettled не нужно никогда.

    Для всех возможных случаев достаточно одного jQuery.when() - просто потому что в эту функцию мы всегда передаем Deferred, а передаваемый Deferred мы всегда можем подрихтовать при помощи jQuery.always() так, чтобы он завершался через deferred.resolve()

    Допустим, нам надо сделать 3 запроса одновременно и получить все результаты, при этом нам не важно успешно завершились запросы или какие-то из них были завершены с ошибкой. Если использовать jQuery.when() в лоб, то разумеется мы не сможем получит все результаты, так как jQuery.when() завершится при получении первого неуспешного результата, проигнорировав все остальные запросы, но если передавать в него немного поправленный Deferred, то никаких проблем с обработкой всех результатов не предвидится:
    // Ссылки:
    
    var urls = [
    	'/link1',
    	'/',
    	'/link3'
    ];
    
    var deferreds = []; // Массив для записи Deferred
    
    // Перебираем ссылки в цикле jQuery:
    
    jQuery.each(urls, function(num, link) {
    	
    	// Создаем новый Deferred и
    	// записываем его наш массив:
    	deferreds.push(jQuery.Deferred());
    	
    	// Отправляем запрос, указав через
    	// always, чтобы после завершения он
    	// успешно завершил созданный ранее Deffered:
    	jQuery.ajax(link).always(deferreds[num].resolve);
    	
    });
    
    
    // Используем when, чтобы дождаться завершения всех Deferred:
    
    jQuery.when.apply($, deferreds).done(function() {
    	
    	// После завершения всех Deferred выведем результаты запросов:
    	
    	console.log('Запросы успешно отправлены, их результаты ниже:');
    	console.dir(arguments);
    	
    });

    Очевидно, что вместо jQuery.ajax может использоваться любая другая функция возвращающая Deferred, т. е. этот принцип можно применять везде и для всего. Конечно промисы применять было бы в удобнее, чем объекты Deferred, но в защиту Deferred скажу, что он может все то же, что и промисы, включая возможность использовать async / await + у него есть некоторые фишки, которых нет у промисов.
    Ответ написан
    Комментировать
  • Как отправить (submit) все формы на странице?

    zkrvndm
    @zkrvndm
    Архитектор решений
    На jQuery это делается примерно так:
    var deferreds = []; // Массив для записи Deferred
    
    // Перебором отправляем формы, создаем Deferred
    // и добавляем их все в массив который создали выше:
    
    $('form').each(function(num, form) {
    	deferreds.push($.Deferred(function(deferred) {
    		$.ajax({
    			'type': 'POST',
    			'url': form.action,
    			'data': $(form).serialize(),
    			'success': function(data) {
    				deferred.resolve(data);
    			},
    			'error': function(xhr, status) {
    				deferred.resolve(status);
    			}
    		});
    	}));
    });
    
    // По завершению всех Deferred из массива
    // выполняем указанную функцию, в нашем случае
    // тупо выводим в консоли все полученные ответы:
    
    $.when.apply($, deferreds).done(function() {
    	console.log('Формы успешно отправлены, массив результатов ниже:');
    	console.dir(arguments);
    });
    Ответ написан
  • Как заставить обновится iframe вместо родительского окна?

    zkrvndm
    @zkrvndm
    Архитектор решений
    По идее если сменить источник в родительском окне, то фрейм потеряет над ним контроль. Напомните о себе завтра, покажу пример, сейчас уже не за компом.
    Ответ написан
    Комментировать
  • Как открыть ссылку в другом браузере?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Такая возможность есть, если вы зарегистрируете на своем компьютере нужный протокол. Разумеется, работать это будет только у вас.

    https://yandex.ru/search/?text=windows+%D0%B7%D0%B...
    Ответ написан
    5 комментариев
  • Как правильно получать изначальные значения фильтров при работе с localStorage?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Я не понимаю в чем проблема. Это обычная практика, когда выставленные фильтры запоминаются сайтом. Единственный тонкий момент - на забыть добавить кнопку СБРОСИТЬ ФИЛЬТРЫ на видном месте, чтобы даже самый тупой видел, что сейчас стоят фильтры с прошлого визита.
    Ответ написан
    Комментировать
  • Почему если в $.cookie 10 строк - кука очищается?

    zkrvndm
    @zkrvndm
    Архитектор решений
    В куках нельзя хранить больше 4 Кб информации. Для хранения товаров используйте localStorage, там лимит 4 Мб, что в 1000 раз больше, чем у Cookie.
    Ответ написан
    Комментировать
  • Как безопасно проверить значение свойства объекта js?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте либо вопросительный знак либо try catch.
    Ответ написан
    Комментировать
  • Как сделать переключение табов без перезагрузки страниц?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вставь на странице с табами такой html-код и будет тебе счастье:
    <script>
    $(function() {
    	
    	// Ссылка на форму которую надо грузить без перезагрузки страницы:
    	var form = $('form[action="https://dev.itlvl.com/nashi-raboty/"]');
    	
    	// Вешаем на поля формы обработчик кликов:
    	
    	form.find('input[type="radio"]').click(async function(e) {
    		
    		e.preventDefault(); // Предотвращаем клик
    		form.css('pointer-events', 'none'); // Блокрируем повторные клики
    		
    		// Формируем ссылку на страницу которая содержит данные кликнутого таба:
    		var link = 'https://dev.itlvl.com/nashi-raboty/?' + $(this).attr('name') + '=' + $(this).val();
    		
    		var request = $.ajax(link); // Запускаем процесс загрузкки этой страницы
    		
    		// Пока грузится, делаем плавное исчезновение текущего таба:
    		await $('.grid-listing').animate({ opacity: 0 }, 500).promise();
    		
    		// Получаем те данные что загрузили и меняем URL в браузере:
    		var html = await request; history.pushState(null, null, link);
    		
    		// Удаляем атрибут активности со всех полей:
    		form.find('input[type="radio"]').removeAttr('checked');
    		
    		$(this).attr('checked', 'checked'); // Делаем активным текущий таб
    		
    		// Вставляем данные с нового таба на текущую страницу:
    		
    		var doc = new DOMParser().parseFromString(html, 'text/html');
    		
    		var html = $('.grid-listing', doc).html();
    		$('.grid-listing').html(html);
    		
    		var html = $('.listing-page__pagination', doc).html();
    		$('.listing-page__pagination').html(html);
    		
    		// Делаем плавное появление для вставленного контента:
    		await $('.grid-listing').animate({ opacity: 1 }, 500).promise();
    		
    		form.css('pointer-events', ''); // Снимаем блокировку кликов
    		
    	});
    	
    });
    </script>
    Ответ написан
  • Как с помощью jQuery проверить содержимое ячейки таблицы и выполнить условие?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуй так:
    <script>
    $(function() {
        if ($('td.product-name:contains("Аэропорт")').length > 0) {
            $('input#ticket_number').hide();
            $('input#address').show();
        }
    });
    </script>

    Вставить надо перед закрывающим тегом </body>
    Ответ написан
    2 комментария
  • Зачем нужен конструктор new Headers?

    zkrvndm
    @zkrvndm Автор вопроса
    Архитектор решений
    Пожалуй нашел я все же одно преимущество у объектов Header - можно смотреть заголовки по ключу БЕЗ учета регистра ключа. Например:
    h = new Headers({test: 123});
    h.get('test');
    h.get('TeSt');

    Это удобнее, чем угадывать регистр или делать какие-то доп. проверки и преобразования.
    Ответ написан
    Комментировать
  • Как отключить замораживание вкладок в Chrome?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Пропишите в своем скрипте, чтобы он запускал музыку в бесконечном повторе. Вкладки в которых играет музыка не замораживаются. Думаю очевидно, что музыкой может быть и воспроизведение тишины.
    Ответ написан
    Комментировать