У меня такой вопрос. Я делаю интерфейс для загрузки платежей по нескольким районам города.Каждая строка таблицы загрузки состоит из след. параметров: даты,
сборщика, названия района, суммы платежей по этому району и чекбокса(если отмечен, то грузим, а если нет - то пропускаем этот район, не грузим).
Таблицу заполняю из БД.
<table>
<tr>
<th>Дата</th>
<th>Сборщик</th>
<th>Сервер</th>
<th>Сумма</th>
<th>Загрузить</th>
</tr>
<tr>
<td>12.05.2018</td>
<td>Сбербанк</td>
<td>Сельцовский</td>
<td>3600</td>
<td><input type='checkbox' value='2_5' checked></td>
</tr>
<tr>
<td>16.05.2018</td>
<td>Платежный агент</td>
<td>'Ивановский'</td>
<td>5500</td>
<td><input type='checkbox' value='3_3'></td>
</tr>
<tr>
<td>22.06.2018</td>
<td>Касса</td>
<td>'Ивановский'</td>
<td>3000</td>
<td><input type='checkbox' value='3_2' checked></td>
</tr>
</table>
<br>
<input type='button' value='Старт' onclick="load();">
При нажатии кнопки "Старт" через ajax на сервер передаются параметры для загрузки оплаты по выбранным строкам. После нажатия на кнопку я
сразу меняю стиль оформления ячейки,ставлю фоновую картинку с бегунком, чтобы было видно, что загрузка в процессе, не зависла.
function load() {
var result = {};
var checkes = document.querySelectorAll("input[type='checkbox']");
var arr = Array.prototype.slice.call(checkes, 0);
arr.forEach(function(element, index) {
if (element.checked) {
var serv_oppl = element.value;
var dt = element.parentElement.parentElement.childNodes[0].innerHTML;
var res = dt + '_' + serv_oppl;
result[res] = true;
element.parentNode.classList.add('wait'); //меняем стиль оформления
element.style.display = 'none'; //а сам чекбокс скрываем
}
});
var par = Object.keys(result);
par.forEach(function(elem) {
loadProccess(elem);
});
}
Передача данных на сервер скрипту: (cкрипт возвращает в браузер строку вида "success('02.07.2018', 2_3, 1)" )
function loadProccess(param) {
jQuery.post("loader.pl", 'param=' + param, function(data) {
var y = document.createElement('script'); //Строка-ответ от сервера оборачивается в тег script и добавляется на страницу.
y.text = data;
document.body.appendChild(y);
});
}
Как только скрипт на сервере отрабатывает, он в качестве ответа пересыпает строку с вызовом функции success , которая (в зависимости от успеха/неуспеха
загрузки) меняет стиль оформления ячейки на "успешный"(галка) или "ошибка"(крестик).
//Функция, которая меняет стили в зависимости от успеха/неуспеха загрузки,
function success(dt, servType, status) {
var allInputs = Array.prototype.slice.call(document.querySelectorAll('input[value="' + servType + '"]'), 0);
var target = allInputs.filter(function(elem) {
return elem.parentNode.parentNode.children[0].innerHTML == dt;
});
var loadState = status ? 'success' : 'error';
target.forEach(function(element) {
element.parentNode.classList.add(loadState);
element.parentNode.classList.remove('wait');
});
}
Стили:
.wait {
background: url(img/progress.gif) no-repeat;
}
.success {
background: #f6d654 url(img/success.png) no-repeat;
}
Когда я загружаю 2-3 позиции из той верхней таблицы, то все отрабатывает коррекно. Но как только строк для загрузки 7 и более, получается
забавная картина: загрузка вроде как и прошла(бегунок прогресса изчезает, ведь мы же удалили у ячейки класс .wait), а галка об успешной загрузке
не появляется, хотя цвет ячейки сразу меняется. Галка об успешной загрузке появляется позже по времени сразу у нескольких строк, которые успели к
этому времени загрузиться.Т.е. получается, что эта галка как бы отстает, загрузка уже прошла, а она появляется гораздо позже, секунды на 4-5 и не
последовательно, а у кучи сразу.
Вопрос: как мне избавиться от такого рассинхрона? Или может я не совсем верно использую ajax при передачи параметров на сервер?
