Добрый день! Уже третий день пытаюсь понять почему так работает код.
Есть функция, которая срабатывает при выборе имени в селекте:
$('#select-name').change(function(){
var year = '2018';
$('.money-wrapper').empty();
$('.money-account').hide();
$('#add-item-money').hide();
$('.years, .statistic, .saving-account').show();
$('.wrap-money-curent-year').empty();
var name = ($(this).val());
getYears(name, year); //вызов функции генерации кнопки "года"
if ($('.years button').hasClass('active')) {
year = $('.years').find('button.active').val();
} else {
$('.years button').first().addClass('active');
year = $('.years').find('button.active').val();
console.log('no class');
}
});
Функция getYears(name, year) посылает ajax-запрос на сервер. С сервера приходит массив с годами, которые есть в БД и потом генерируются кнопки button, при этом если год из БД равен переменной year, то кнопке добавляется класс active:
function getYears(name, year){
$.ajax({
type: "POST",
url: "getYears.php",
data: {name: name},
dataType: 'json',
beforeSend: function(){
$('.loader-wrap').css('z-index', '999').show();
},
complete: function(){
$('.loader-wrap').css('z-index', '0').hide();
},
success: function(data){
switch(data.length) {
case 0:
$('.years').append('<button class="btn-style" id ="add-first-item">Новая запись</button>');
$('#add-item-money').hide();
break;
case 1:
$('.years').append('<button class="year active" id ="'+data[0]+'" value="'+data[0]+'">'+data[0]+'</button>');
break;
default:
console.log(typeof data[0]);
console.log(typeof year);
for(var k in data){
if (parseInt(data[k]) == parseInt(year)) {
$('.years').append('<button class="year active" id ="'+data[k]+'" value="'+data[k]+'">'+data[k]+'</button>');
} else {
$('.years').append('<button class="year" id ="'+data[k]+'" value="'+data[k]+'">'+data[k]+'</button>');
}
}
break;
}
}
});
};
Я мыслил так: Выбирается имя в select, вызывается функция getYears(name, year), а там через ajax с сервера получает список 'годов' и после возвращения ответа от сервера переходит в функцию success и там генерируются кнопки. Потом функция getYears(name, year) завершает свою работу и выполняется код
if ($('.years button').hasClass('active')) {
year = $('.years').find('button.active').val();
} else {
$('.years button').first().addClass('active');
year = $('.years').find('button.active').val();
console.log('no class');
}
Но если выполнить скрипты пошагово видно, что выполняется функция getYears(name, year) только до функции complete (при этом достаются данные из сервера), но на success не идет, а выходит из функции getYears(name, year) и начинает проверку if... Потом в конце функции change генерируются кнопки. То есть происходит ситуация, когда проверка на существование класса active (if ($('.years button').hasClass('active'))...) происходит тогда, когда кнопки еще не сгенерировались. Не могу понять почему функция getYears(name, year) не отрабатывает полностью. если посмотреть в Консоль, срабатывает такая последовательность:
console.log('no class');
console.log(typeof data[0]);
console.log(typeof year);
А должно теоретически:
console.log(typeof data[0]);
console.log(typeof year);
console.log('no class');
Может я запутанно рассказал, но может все таки кто-то подскажет. Моих знаний уже не хватает,чтобы понять почему так работает функция. Может где-то ошибка есть, но я ее не вижу.
