Выбор select ajax опаздывает на один шаг
В продолжении вопроса - при выбора опции select, цвета в input type="color" меняются сразу, а в таблице со второго раза. Где исправить чтобы и стиль таблицы отрисовывался сразу?
const def = [
{v: '#idColor_th', t: '.th'},
{v: '#idColor_td1', t: '.td1'},
{v: '#idColor_td2', t: '.td2'},
]
$(document).on('input', function oninputColor() {
def.forEach(o => {
const e = $(o.t)
e.css('backgroundColor', $(o.v).val())
e.css('color', $(o.v + '_text').val())
})
})
/* При изменении select */
$('#theme_ids').on('change', function(){
theme_id = $('#theme_ids').val();
$.ajax({
url: 'ajax.php',
method: 'post',
data: { 'theme_ids': theme_id },
success: function(data){
$('#idColor_th').val(data['color_th']);
$('#idColor_th_text').val(data['color_th_text']);
$('#idColor_td1').val(data['color_td1']);
$('#idColor_td1_text').val(data['color_td1_text']);
$('#idColor_td2').val(data['color_td2']);
$('#idColor_td2_text').val(data['color_td2_text']);
}
});
});.tlist{
table-layout: fixed;
}
.tlist th{
background: #efefef;
border: 1px solid #cfcfcf;
}
.tlist td{
border: 1px solid #eee;
}
.tlist tbody tr:nth-child(odd){
background: #fff;
}
.tlist tbody tr:nth-child(even){
background: #f7f7f7;
}<form action="" method="post">
<select name='theme_ids' id='theme_ids'>
<option value=1>Gray</option>
<option value=2>Green</option>
<option value=3>Orange</option>
</select>
<input type="submit" value="Применить" name="apply_theme_btn">
</form>
<form action="" method="post">
<table>
<tr>
<td>Шапка</td>
<td class="w250">
<input type="color" id="idColor_th" name="color_th" value="#efefef"></td>
<td rowspan="8" style="vertical-align:top;">
<table id="pattern" class="tlist">
<tr class="th">
<th class="th">Столбец 1</th>
<th class="th">Столбец 2</th>
<th class="th">Столбец 3</th>
</tr>
<tr class="td1">
<td>Цифры</td>
<td>123 456,78</td>
<td>90 987 123,00</td>
</tr>
<tr class="td2">
<td>Дата</td>
<td>05.01.2023</td>
<td>14.07.2023</td>
</tr>
<tr class="td1">
<td>Контакты</td>
<td>example@pochta.uz</td>
<td>+998 00 123 45 78</td>
</tr>
<tr class="td2">
<td>Данные</td>
<td>Маткарим Маримбоевич</td>
<td>ООО "NAME"</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Текст шапки</td>
<td><input type="color" id="idColor_th_text" name="color_th_text" value="#000000"></td>
</tr>
<tr>
<td>Нечётные строки</td>
<td><input type="color" id="idColor_td1" name="color_td1" value="#f7f7f7"></td>
</tr>
<tr>
<td>Текст нечётных строк</td>
<td><input type="color" id="idColor_td1_text" name="color_td1_text" value="#000000"></td>
</tr>
<tr>
<td>Чётные строки</td>
<td><input type="color" id="idColor_td2" name="color_td2" value="#ffffff"></td>
</tr>
<tr>
<td>Текст чётных строк</td>
<td><input type="color" id="idColor_td2_text" name="color_td2_text" value="#000000"></td>
</tr>
<tr>
<td>Название стиля</td>
<td><input type="text" name="theme_name"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Сохранить" name="save_theme_btn"></td>
<td></td>
</tr>
</table>
</form>Содержимое ajax.php
if(!empty($_POST['theme_ids'])){
/* тут выбирается данные из БД и возвращается в массиве $theme */
ob_end_clean();
header('Content-Type: application/json');
echo json_encode($theme); //, JSON_UNESCAPED_UNICODE
exit();
}
UPD: Решил вопрос таким образом. Сделал 2 отдельных ajax запроса при выборе опции из select'а. Соответственно 2 обработчика в файле ajax.php. Один запрос возвращает данные по цветам на input colors, второй запрос возвращает готовую таблицу-шаблон с цветовой схемой, то есть отрисовывает таблицу заново.
Источник: Stack Overflow на русском