10 Январь 2023

JavaScript — проверка на число и разделитель разрядов для чисел

if ( Number.isFinite(+value) && parseInt(value) > 0) {
    return parseInt(value).toLocaleString('ru')
}

1

2

3

if ( Number.isFinite(+value) && parseInt(value) > 0) {

return parseInt(value).toLocaleString('ru')

}

рубрики: Javascript | Комментарии (0)

15 Март 2021

Javascript — не отрабатывает cобытие on load

Для удобной работы при заказе изображений для фотообоев на сайте Декор Имидж я разрабатывал соответствующий функционал — при вводе размеров изображение разбивается на полосы с указанием размеров.

НО на сайте обнаружился неприятный баг — при переходе на детальную страницу данный функционал работал раз через два — то разобъёт на полосы, то нет.
Причём чаще нет, чем да.

После изучения данной проблемы я экспериментальным путём пришел к выводу, что событие on load к которому я привязывал процедуру по работе с изображением отрабатывало не перманентно.
С коллегами с форума программистов (пост), выяснилось, что событие не отрабатывает если изображение «подтягивается» из кэша браузера (что по моему мнению конечно же недоработка).

Ниже рабочее решение — смысл в том, что для 100% отрабатывания события on load атрибут SRC картинки сначала мы обнуляем, а потом после присвоения с нужным адресом уже слушаем событие load.

/**
 * TAP-версия загрузки изображения по HTTP
 * @param {string} url Строка URL
 * @returns {Promise<void>} Обещание, не возвращающее результат
 */
function loadImgAsync(img, url) {
    return new Promise((resolve, reject) => {
        img.addEventListener("load", function loadHandler() {
            img.removeEventListener("load", loadHandler);
            resolve();
        });
        img.addEventListener("error", function errorHandler() {
            img.removeEventListener("error", errorHandler);
            reject(new Error("Ошибка загрузки изображения с адреса: " + url));
        });
        img.setAttribute("src", ""); // Сделать, чтобы картинка точно грузилась
        img.setAttribute("src", url);
    });
}
let img = document.querySelector("img");
// img.onload = () => { console.log("Картинка загрузилась. Обрабатываю."); };
console.log(img.complete);
 
document.querySelector("#btn").onclick = btn_click;
 
async function btn_click() {
    let url = "wallpaper.jpg";
    // let url = "https://dekorimage.ru/upload/iblock/c24/c24e87409cfc786486cd5f3fe893f3cf.jpg";
    // let url = "https://dekorimage.ru/upload/iblock/596/596c1129512974610c3a281a99f03db2.jpg";
    //let url = "https://cyberstatic.net/images/cyberforum_logo.png";
    try {
        await loadImgAsync(img, url);
        console.log("Картинка загружена. Обработка.");
    }
    catch (error) {
        console.log(error.message);
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

/**

* TAP-версия загрузки изображения по HTTP

* @param {string} url Строка URL

* @returns {Promise<void>} Обещание, не возвращающее результат

*/

function loadImgAsync(img, url) {

return new Promise((resolve, reject) => {

img.addEventListener("load", function loadHandler() {

img.removeEventListener("load", loadHandler);

resolve();

});

img.addEventListener("error", function errorHandler() {

img.removeEventListener("error", errorHandler);

reject(new Error("Ошибка загрузки изображения с адреса: " + url));

});

img.setAttribute("src", ""); // Сделать, чтобы картинка точно грузилась

img.setAttribute("src", url);

});

}

let img = document.querySelector("img");

// img.onload = () => { console.log("Картинка загрузилась. Обрабатываю."); };

console.log(img.complete);

document.querySelector("#btn").onclick = btn_click;

async function btn_click() {

let url = "wallpaper.jpg";

// let url = "https://dekorimage.ru/upload/iblock/c24/c24e87409cfc786486cd5f3fe893f3cf.jpg";

// let url = "https://dekorimage.ru/upload/iblock/596/596c1129512974610c3a281a99f03db2.jpg";

//let url = "https://cyberstatic.net/images/cyberforum_logo.png";

try {

await loadImgAsync(img, url);

console.log("Картинка загружена. Обработка.");

}

catch (error) {

console.log(error.message);

}

рубрики: Javascript | Комментарии (0)

9 Июль 2020

Передача в PHP многомерного массива AJAX запросом

С многомерными массивами в javascript беда, а уж с передачей многомерного массива AJAX запросом — тем более.
Не буду долго рассказывать о своих страданиях 🙂 сразу готовое, красивое решение

data = new Object();
for (i = 0; i < games.length; i++) {  
    data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();
    data['games[' + i + '][img]']  = $(games[i]).find('.game-img').val();
    data['games[' + i + '][url]']  = $(games[i]).find('.game-url').val();
}
$.ajax({            
    url: 'games.php',
    type: "POST",
    data: data
});

Всё - ловим в games.php правильный массив $_POST

1

2

3

4

5

6

7

8

9

10

11

12

13

data = new Object();

for (i = 0; i < games.length; i++) {

data['games[' + i + '][name]'] = $(games[i]).find('.game-name').val();

data['games[' + i + '][img]'] = $(games[i]).find('.game-img').val();

data['games[' + i + '][url]'] = $(games[i]).find('.game-url').val();

}

$.ajax({

url: 'games.php',

type: "POST",

data: data

});

Всё - ловим в games.php правильный массив $_POST

рубрики: Javascript, Javascript - JQuery, Лайфхак, Полезности | Комментарии (0)

18 Апрель 2020

Как передать массив из PHP в Javascript

[script] var obj = [? echo json_encode($php_variable); ?]; [/script]
(вместо квадратных скобок — ставим <>)
В переменной $php_variable может быть любой PHP массив.

рубрики: Javascript | 3 комментария

3 Март 2020

Javascript автоматизация работы с сайтом в консоли браузера

Столкнувшись с проблемой чистки ящика Яндекс.Почты нашел интересную статью, в которой предлагалось автоматизировать работу с ящиком открыв консоль и вызвав там самописную стороннюю фукнцию, выполнявшуюся в бесконечном цикле!

Идея работы с реальным контентом сайта самописным кодом, да ещё в бесконечном цикле мне очень понравилась, пока не знаю где применю — но однозначно в закладки!!!

(function(){
Console.log(‘тут мутим с селекторами — чекаем удаляем и т.д. и т.п.’);
setTimeout(arguments.callee,5000);
})();

Код автора, для удаления писем. Уже не актуальный — Яша видимо вёрстку сменил, но смысл ясен — пометили письма, нажали удалить и так в цикле!
(function(){ $('.block-messages-list-box.b-layout__first-pane input[type=checkbox]:not(:first)').trigger('click').trigger('click'); $('a.b-toolbar__item.b-toolbar__item_delete.daria-action').click(); setTimeout(arguments.callee,5000); })();

рубрики: Javascript, Javascript - JQuery, Лайфхак, Полезности | Комментарии (0)

21 Январь 2016

Как быстро преобразовать таблицу Exel xls xlsx в простой html без лишних классов

Нарыл сегодня мега полезный скрипт преобразования таблички Excel из буфера обмена (любой формат xls xlsx и т.д.) в простой html без лишних классов! Однозначно репост! Чуть позже оформлю так же — для возможности онлайн преобразования.

jQuery(document).ready(function(){ jQuery('#convert').click(function() { var arrayOfLines = jQuery('#input').val().split('\n'); var firstTH = false; if(jQuery('#useth').attr('checked')) firstTH = true; var result = '


\n
\n';

        for(var key in arrayOfLines) {

            if(arrayOfLines[key]) {

                var arrayOfCells = arrayOfLines[key].split('\t');

                result += '    
\n';

                for(var key2 in arrayOfCells) {

                    if(firstTH && key == 0) {

                        result += '        
\n';

                    }

                    else {

                        result += '        
\n';

                    }

                }

                result += '    
\n';

            }

        }

        result += '
\n



' + arrayOfCells[key2] + '

' + arrayOfCells[key2] + '

' + arrayOfCells[key2] + '	' + arrayOfCells[key2] + '

'; jQuery('#output').html(result); jQuery('#thetable').html(result); }); });

рубрики: Javascript, Javascript - JQuery | Комментарии (0)

10 Октябрь 2014

Динамическое подключение Яндекс.Карт в AJAX запросе

Итак, задача такова — выбираем из списка город, отображается карта с расставленными на ней магазинами.

Магазины я расставил в конструкторе Яндекс.Карт который на выходе генерит подключаемый javascript код

Собственно, вроде всё просто — при выборе разных городов динамически подключаем нужный скрипт и вперёд!
Но тут то и фишка — код нужно не только подключить, но и выполнить.
Не буду долго томить — вот готовое решение, которое я повесил на success событие ajax запроса.
Последняя строчка — самая важная (почему то в выложенных в сети примерах этого момента нигде не было — .appendchied() и всё на этом).

рубрики: Javascript, Программирование | Комментарии (1)

20 Ноябрь 2013

Javascript — передача параметра в модальное окно fancybox

Вроде элементарное ТЗ — а промучался полдня.
При клике на «купить» — должно появляться модальное окно «Товар добавлен в корзину» «продолжить покупки» «оформить заказ»
В качестве модального окошка решено использовать скриптик JancyBox — и центрируется и затемняет, в общем всё устраивает!
кроме одного НО! — при нажатии на «купить» товар сначала должен «упасть» в корзину, т.е. нужно вызвать соответствующую функцию с передачей в качестве параметра ID товара

<a class="modal" href="#inline" rel="1111">Buy 1111</a>
<a class="modal" href="#inline" rel="2222">Buy 2222</a>

1 2	<a class="modal" href="#inline" rel="1111">Buy 1111</a> <a class="modal" href="#inline" rel="2222">Buy 2222</a>

$(".modal").fancybox({
	'onStart': function() { 
    	      var id = $(this).attr('rel');
              alert(id);     
           }
});

1

2

3

4

5

6

$(".modal").fancybox({

'onStart': function() {

var id = $(this).attr('rel');

alert(id);

}

});

Так не пашет! — даёт «undefined»

Как вариант — повесить сначала click — в нём сделать нужный вызов, а потом открыть окно имитацией клика
$(«#id2»).trigger(‘click’);

    $("#id1").click(function() {     
    	var id = $(this).attr('rel');
    	$("#inline1").html(id);
	$("#id2").trigger('click');
    });

1

2

3

4

5

$("#id1").click(function() {

var id = $(this).attr('rel');

$("#inline1").html(id);

$("#id2").trigger('click');

});

Но почему-то в таком варианте модальное окно выводится сначала вверх потом только центрируется. Облом!

Гуглим далее — нашел свою обработку Тайтла с помощью собственной фукнции вешаемой параметром TitleFormat
Внутри которой дёрнуть rel можно следующим образом $(currentArray[currentIndex]).attr(‘rel’)

Т.е. вместо задания тайтла я получу ID и вызову нужную мне функцию.

На этом «мудрёном» варианте и остановлюсь — через задний проход конечно, но работает 🙂

P.S.
С вопросом по решению проблемы я создал 3 поста на форумах
phpclub.ru
javascript.ru/forum/
forum.searchengines.ru

На первом ноль реакции, на втором попытались помочь — но безуспешно
На javascript.ru/forum — 200 % попадание в цель!
На основе моего вопроса был создан готовый рабочий пример! В личке вебмастер ответил на мой вопрос — откуда именно инфа с указанием прямых ссылок на нужный мне пример в мануале!

Собственно, как обычно
Рони ответил в ПМ — за что ему ещё раз огромное спасибо!

Как обычно — всё гениальное просто — «Meditate on documentation!»

Дока тут http://fancyapps.com/fancybox/
Пример с передачей ID тут http://jsfiddle.net/Se8Yu/

рубрики: Javascript, Полезности, Программирование, Сайтостроение | Комментарии (0)

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Окт
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31