Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Async в ajax

Добрый день ув. формучане.
Возникла проблема след. рода, функция:
function (тут параметры){
аякс (отрабатывает при определенных условиях)

тут еще код (если отработал ajax учитывает и результат его работы)
}

Проблема: код срабатывает раньше, чем ajax закончит свою работу, а в дальнейшем мне нужно учитывать результат работы аякса.
Есть чудо свойство async: false, но выставив его я получаю варнинг.
Оказывается его собираются убрать в последующих обновлениях(((

Есть какие-то альтернативы async false?
PS: структуру приложения (как пишет гугл) менять не сильно хочется (переделать код предыдущих разработчиков, которых было не мало - не очень хочется, учитывая то, что там ~ 1.5к строчек кода)
PPS: просто забить (как советовали на других форумах) - не вариант.
Ответ: Чтоб сильно не менять структуру, мб добавить callback?
function fn(param) {
	if (param) {
  	ajax(function(response) {
    	alert(response);
    });
  }
  else {
  	alert('without ajax');
  }
}


function ajax(cb) {
	setTimeout(function() {
    cb('WITH AJAX');
  }, 2000);
}


fn();
fn(true);
Вопрос: как получить значение псевдокласса :valid/:invalid ?

Есть форма с инпутами, валидация которых должна осуществляться браузером с помощью регулярных выражений, например:

<form class="form1">
<input required type="email" name="email" pattern="\S+@[a-z]+.[a-z]+" oninput="validateComments(this)">
</form>

Пытаюсь с помощью js получить значение, пройдена ли эта валидация
<script type="text/javascript">
function validateComments(input) {
console.log(input.prototype.valid);
}
</script>

но при такой записи (как и при всех других моих попытках) получаю undefined.

как получить значение псевдокласса input, :valid/:invalid ?
Ответ:
Сообщение от рони
console.log(input.validity.valid);
Да, надо HTML5 внимательнее изучать...
Вопрос: TypeError: $ is not a function

Всем привет! Подключаю скрипт на JQuery к проекту после чего Mozilla начинает выводить ошибку.
firebug выдает TypeError: $ is not a function и фрагмент кода $('.someDiv').on('click', function(e){ (см. вложения).

Версия JQuery 1.11.3, версия firefox 43.0.4. когда обновляю JQuery все работает, но подозреваю, что из-за этого потом не получается загрузить миниатюры в wordpress 4.4.1. Ошибка появляется не сразу, но спустя какое-то время. Дело в том, что я думал, что проблема в версии, но когда узнал, что в Google Chrome все работает без обновлений очень удивился.

Вот такой скрипт:

$('.someDiv').on('click', function(e){
        var modal = $('#someDiv1').hide();
      })
$('.someDiv').on('click', function(e){
        var modal = $('#modalDiv').show();
      })


Кто сможет помочь буду очень сильно благодарен.
Ответ: Конфликт $. Попробовать:

var jq=jQuery.noConflict();
jq(document).ready(function(){  
  jq('selector')....
});
//или
jQuery(document).ready(function($){
   $('selector')....
});


Или иные способы.
Вопрос: не работает function(event)

Добрый день.
У меня не работает Function(event).
Пытаюсь привязать функцию, при нажатии на какой-либо из элементов списка, нашим li будет добавляться либо убираться класс .done
к сожалению, не выходит

Просьба к более опытным товарищам помочь

имеется вот такой js(могу скинуть html) :

var todo = document.getElementById('todo'); //наш ul

		todo.onclick = function(event) {
			var target = event.target;
			if(target.tagName != 'li') {
				return;
			} else {
				toToggle(target);
			}
		}


function toToggle() {
				this.classList.toggle('done');
}
Ответ: Все у него правильно, кроме этого

Сообщение от samp
this.classList.toggle('done');
Зачем this, если передается элемент. Его и бери

function toToggle(el) {el.classList.toggle('done');}

Ну, и смысл этой функции не ясен. Тогда уж toggleDone(){}
Вопрос: removeAttribute is not a function

function opening() {
	var bags = document.getElementsByClassName('close');
	for (var i=0; i < bags.length; i++) {
		bags[i].onclick = task;
	}
}
function task(e) {
	var imNum = e.id;
	e.removeAttribute('src');
	e.setAttribute('src', imNum + "open.png");
}

при выполнении данного кода консоль выдает ошибку e.removeAttribute is not a function. в чем именно проблема
Ответ: strange.tany,
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call(document.querySelectorAll('.close'), function(item) {
        item.addEventListener('click', function(event) {
            item.src = item.id + 'open.png';
        });
    });
});


или
function task(e) {
  var item = e.target;
  item.src = item.id + 'open.png';
}
Вопрос: Несколько условий function dynamic1(parent, child)

Есть вывод формы на javascript.
<script type="text/javascript">
function dynamic1(parent,child)
{
var parent_array = new Array();
// This is the default value
parent_array[''] = ['Please select a manufacturer'];
// All other elements
// parent_array['PARENT NAME'] = ['CHILD 1','CHILD 2','CHILD 3','ETC'];
parent_array['Украина'] = [' ','Винница'];
parent_array['Польша '] = [' ','Луцьк'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++)
{
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];
}
}

</script>

script type="text/javascript">
function dynamic2(parent,child)
{
var parent_array = new Array();
// This is the default value
parent_array[''] = ['Please select a manufacturer'];
// All other elements
// parent_array['PARENT NAME'] = ['CHILD 1','CHILD 2','CHILD 3','ETC'];
parent_array['Винница'] = [' ','Бар','Бершадь','Гайсин','Жмеринка','Калинівка','Козятин','Немирів','Тульчин'];
parent_array['Луцк'] = [' ','Ковель','Нововолинськ'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++)
{
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];
}
}

</script>


Подскажите пожалуйста, как можно сделать не одно условие родительского элемента, а несколько, что бы было несколько условий на основании которых предлагался вариант выбора ответа.
Ответ: Собрался вроде с мыслей.
Пользователь заходид. выбирает свой отдел, дальше выбирает свою область, потом свой город, потом свою улицу.
Как то можно сделать отбор что бы учитывало другие поля условия. к примеру отделения ГБ есть только в определенных городх, а по списку забиты все города, так же и улицы. Отделения есть по всех улицах, но ГБ только на определенных

<script type="text/javascript">
	function dynamic1(parent,child)
	{
		var parent_array = new Array();
		// This is the default value
		parent_array[''] = ['Please select a manufacturer'];
		// All other elements
		// parent_array['PARENT NAME'] = ['CHILD 1','CHILD 2','CHILD 3','ETC'];
		parent_array['ГБ'] = ['','Вінницька','Дніпропетровська','Київська','Луганська','Львівська','Одеська','Полтавська','Харківська','Черкаська'];
		parent_array['ЦП'] = ['','Вінницька','Волинська','Дніпропетровська','Донецька','Житомирська','Закарпатська','Запорізька','Івано-Франківська','Київська','Кіровоградська','Львівська','Миколаївська','Одеська','Полтавська','Рівненська','Тернопільська','Харківська','Херсонська','Хмельницька','Черкаська'];
		parent_array['РУ'] = ['','Вінницька','Волинська','Дніпропетровська','Донецька','Житомирська','Закарпатська','Запорізька','Івано-Франківська','Київська','Кіровоградська','Луганська','Львівська','Миколаївська','Одеська','Полтавська','Рівненська','Сумська','Тернопільська','Харківська','Херсонська','Хмельницька','Черкаська','Чернівецька','Чернігівська'];
		parent_array['ТТ'] = ['','Вінницька','Волинська','Дніпропетровська','Донецька','Житомирська','Закарпатська','Запорізька','Івано-Франківська','Київська','Кіровоградська','Луганська','Львівська','Миколаївська','Одеська','Полтавська','Рівненська','Сумська','Тернопільська','Харківська','Херсонська','Хмельницька','Черкаська','Чернівецька','Чернігівська'];
			
		// Get the child
		var thechild = document.getElementById(child);
		
		// Remove all other options from the select element
		thechild.options.length = 0;
		
		// What value are we looking for ?
		var parent_value = parent.options[parent.selectedIndex].value;
		
		// No value found, use the default value
		if (!parent_array[parent_value]) parent_value = '';
		
		// Set the correct length
		thechild.options.length = parent_array[parent_value].length;
		
		// Add the options
		for(var i=0;i<parent_array[parent_value].length;i++)
		{
			thechild.options[i].text = parent_array[parent_value][i];
			thechild.options[i].value = parent_array[parent_value][i];
		}
	}


	function dynamic2(parent,child)
	{
		var parent_array = new Array();
		// This is the default value
		parent_array[''] = ['Please select a manufacturer'];
		// All other elements
		// parent_array['PARENT NAME'] = ['CHILD 1','CHILD 2','CHILD 3','ETC'];
	parent_array['Вінницька'] = [' ','Бар','Бершадь','Вінниця','Гайсин','Жмеринка','Калинівка','Козятин','Немирів','Тульчин'];
	parent_array['Волинська'] = [' ','Луцьк','Ковель','Нововолинськ'];
	parent_array['Дніпропетровська'] =[' ','Дніпро','Камянське','Кривий Ріг','Нікополь','Новомосковськ','Павлоград','Першотравенськ','Тернівкав'];
	parent_array['Донецька'] =[' ','Дружківка','Костянтинівка','Краматорськ','Красноармійськ','Маріуполь','Покровськ','Словянськ'];
	parent_array['Житомирська'] =[' ','Бердичів','Житомир','Коростень','Малин','Маріуполь','Новоград-Волинський'];
	parent_array['Закарпатська'] =[' ','Берегово','Виноградів','Іршава','Мукачево','Тячів','Ужгород','Хуст'];
	parent_array['Запорізька'] =[' ','Запоріжжя','Бердянськ','Мелітополь'];
	parent_array['Івано-Франківська'] =[' ','Івано-Франківськ','Калуш','Коломия','Долина'];
	parent_array['Київська'] =[' ','Київ','Камянське','Бориспіль','Біла Церква','Бровари','Славутич','Обухів','Васильків'];
	parent_array['Кіровоградська'] =[' ','Олександрія','Кропивницький','Світловодськ'];
	parent_array['Луганська'] =[' ','Сєвєродонецьк','Старобільськ','Лисичанськ','Рубіжне'];
	parent_array['Львівська'] =[' ','Львів','Дрогобич','Стрий','Новояворівськ','Золочів'];
	parent_array['Миколаївська'] =[' ','Миколаїв','Вознесенськ','Южноукраїнськ','Баштанка'];
	parent_array['Одеська'] =[' ','Балта','Білгород-Дністровський','Ізмаїл','Одеса','Подільськ','Чорноморськ','Южне'];
	parent_array['Полтавська'] =[' ','Полтава','Лубни','Кременчук','Горішні Плавні'];
	parent_array['Рівненська'] =[' ','Рівне','Костопіль','Дубно'];
	parent_array['Сумська'] =[' ','Суми','Шостка','Конотоп','Ромни','Охтирка'];
	parent_array['Тернопільська'] =[' ','Тернопіль','Борщів','Чортків'];
	parent_array['Харківська'] =[' ','Ізюм','Купянськ','Балаклія','Зміїв','Харків','Чугуїв'];
	parent_array['Херсонська'] =[' ','Гола Пристань','Скадовськ','Балаклія','Каховка','Херсон'];
	parent_array['Хмельницька'] =[' ','Славута','Камянець-Подільський','Хмельницький'];
	parent_array['Черкаська'] =[' ','Золотоноша','Умань','Сміла','Черкаси'];
	parent_array['Чернівецька'] =[' ','Чернівці'];
	parent_array['Чернігівська'] =[' ','Ніжин','Прилуки','Чернігів'];


			// Get the child
		var thechild = document.getElementById(child);
		
		// Remove all other options from the select element
		thechild.options.length = 0;
		
		// What value are we looking for ?
		var parent_value = parent.options[parent.selectedIndex].value;
		
		// No value found, use the default value
		if (!parent_array[parent_value]) parent_value = '';
		
		// Set the correct length
		thechild.options.length = parent_array[parent_value].length;
		
		// Add the options
		for(var i=0;i<parent_array[parent_value].length;i++)
		{
			thechild.options[i].text = parent_array[parent_value][i];
			thechild.options[i].value = parent_array[parent_value][i];
		}
	}
Вопрос: Как корректно заменить async: false на async: true

Проблема в том, что данный код устарел, блокирует браузер на время выполнения скрипта и выдает warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

я понимаю, что нужно использовать колбэки, но у меня не получается корректно внести изменения, все по цепочки начинает отваливаться(

Что за tooltip? config.tooltip в любом случае (async: false или async: true) равен true, но при async: true сразу ошибка:

Uncaught TypeError: Cannot read property 'tooltip' of null

Javascript
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var JCART = (function() {
 
        // This script sends Ajax requests to config-loader.php and relay.php using the path below
        // We assume these files are in the 'jcart' directory, one level above this script
        // Edit as needed if using a different directory structure
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                async: false,
                success: function(response) {
                    config = response;
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
            return config;
        ;
        }());
 
        var setup = (function() {
            if(config.tooltip === true) {
 
                tip.text(config.text.itemAdded);
    
                // Tooltip is added to the DOM on mouseenter, but displayed only after a successful Ajax request
                $('.jcart [type=submit]').mouseenter(
                    function(e) {
                        var x = e.pageY + 25,
                            y = e.pageX + -10;
                        $('body').append(tip);
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mousemove(
                    function(e) {
                        var y = e.pageY + 25,
                        x = e.pageX + -10;
                        tip.css({top: y + 'px', left: x + 'px'});
                    }
                )
                .mouseleave(
                    function() {
                        tip.hide();
                    }
                );
            }
Ответ: Убрал все лишнее, ошибок нет, товар в корзину добавляется. Но ajax не работает, страница перезагружается. Вот весь код без лишней лабуды:

Javascript
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// jCart v1.3
// [url]http://conceptlogic.com/jcart/[/url]
 
$(function() {
    var JCART = (function() {
        var path = 'jcart',
            container = $('#jcart'),
            token = $('[name=jcartToken]').val(),
            tip = $('#jcart-tooltip');
 
        var config = (function() {
            var config = null;
            $.ajax({
                url: path + '/config-loader.php',
                data: {
                    "ajax": "true"
                },
                dataType: 'json',
                success: function(response) {
                    config = response;
                    var setup = (function() {
                    // Remove the update and empty buttons since they're only used when javascript is disabled
                    $('#jcart-buttons').remove();
        
                    // Default settings for Ajax requests
                    $.ajaxSetup({
                        type: 'POST',
                        url: path + '/relay.php',
                        success: function(response) {
                            // Refresh the cart display after a successful Ajax request
                            container.html(response);
                            $('#jcart-buttons').remove();
                        },
                        // See: [url]http://www.maheshchari.com/jquery-ajax-error-handling/[/url]
                        error: function(x, e) {
                            var s = x.status, 
                                m = 'Ajax error: ' ; 
                            if (s === 0) {
                                m += 'Check your network connection.';
                            }
                            if (s === 404 || s === 500) {
                                m += s;
                            }
                            if (e === 'parsererror' || e === 'timeout') {
                                m += e;
                            }
                            alert(m);
                        }
                    });
                }());
                },
                error: function() {
                    alert('Ajax error: Edit the path in jcart.js to fix.');
                }
            });
        ;
        }());
 
        
        // If this is not the checkout the hidden input doesn't exist and no value is set
        var isCheckout = $('#jcart-is-checkout').val();
 
        function add(form) {
            // Input values for use in Ajax post
            var itemQty = form.find('[name=' + config.item.qty + ']'),
                itemAdd = form.find('[name=' + config.item.add + ']');
            // Add the item and refresh cart display
            $.ajax({
                data: form.serialize() + '&' + config.item.add + '=' + itemAdd.val(),
                success: function(response) {
                    // Momentarily display tooltip over the add-to-cart button
                    if (itemQty.val() > 0 && tip.css('display') === 'none') {
                        tip.fadeIn('100').delay('400').fadeOut('100');
                    }
                    container.html(response);
                    $('#jcart-buttons').remove();
                }
            });
        }
        // Add an item to the cart
        $('.jcart').submit(function(e) {
            add($(this));       
            e.preventDefault();
        });
    }()); // End JCART namespace
}); // End the document ready function
Вопрос: Можно ли заставить работать await внутри setTimeout?

Javascript
1
2
3
setTimeout(() => {
let data = await fn();
}, 1000 );
или только таймер внутри fn реализовывать?
Ответ: Leo Khan, если мы получаем данные от внешнего источника, то в данном примере принудительная задержка не нужна.
Мы итак долго и асинхронно ждём данные.
PHPHTML
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
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="button" id="startButton" value="Старт"/>
    <script>
        let data = [5, 3, 6, 1, 8];
 
        // Асинхронный обработчик очень удобно вешать на кнопку
        document.getElementById("startButton").onclick = async e => { fn(data); };
 
        // Допустим есть такая функция, которая принимает массив..
        async function fn(arr) {
            // .. в ней я прохожу по нему циклом.
            for (let el of arr) {
                // Тут с буду ждать, когда ко мне прилетит ответ..
                let data = await myfn(el);
                // .. на основании которого я приму решение.
                if (data.optionname === 1) {
                    console.log("Первое решение");
                }
                else if (data.optionname === 2) {
                    console.log("Второе решение");
                }
            }
        }
        /**
         * Функция например очень долго получает данные с сервера. Поэтому её нужно асинхронно ждать.
         * Функция берет параметр и возвращает промис с ожидаемым результатом optionname - 1 или 2.
         */
        function myfn(el) {
            return Promise.resolve(
                { optionname: new Date().getMilliseconds() % 2 === 0 ? 1 : 2 }
            );
        }
    </script>
</body>
</html>
Вопрос: async defer порядок загрузки файлов

проставил async / defer в конце страницы таким образом:

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async src="js/jquery.maskedinput.min.js"></script>
<script async src="js/owl.carousel.min.js"></script>
<script defer src="js/scripts.js"></script>


Правильно ли я рассуждаю:

1) Без этих атрибутов скрипты загружаются один за другим, и пока не загрузиться предыдущий, следующий не начнет загружаться
2) Все 4 скрипта загружаются одновременно
3) первым отработает jquery, независимо от того кто загрузился раньше
4) Следующим отработает либо maskedinput либо owl.carousel, смотря кто из них загрузился раньше.
5) Последним отработает scripts.js, даже если он загрузиться раньше всех

?
Ответ: Спасибо, господа, за внесенную ясность!
Вопрос: HTML валидатор - "async" is not a member of a group specified for any attribute

Здравствуйте!
Задался целью "полностью понравиться" валидатору .w3.org, и практически достиг ее...
Но потом задался еще одной целью - понравиться google-speed, а они просят загружать js скрипты после основного контента. Поэтому для подключения jQuery решил использовать асинхронную загрузку..
Но теперь, опять ругается валидатор:
HTML5
1
2
Line 12, Column 42: "async" is not a member of a group specified for any attribute
    <script type="text/javascript" async src="/js/jquery-1.4.3.min.js"></script>
Можно ли как-то эту ошибку убрать?
Ответ: Супер, все работает, спасибо... ))
.. правда не очень красиво получается: сначала загружается куча картинок на страницу, а потом они "перестраиваются" в карусель... с async как-то "поаккуратней" выглядело

Добавлено через 8 минут
.. но зато гугл-спиду нравится!!! ))))