$.ajax({
type: "POST",
url: `http://${document.domain}:${location.port}/api/racks`,
data: '',
success: function (data) {
for (let i = 1; i <= data.racks_count; i++) {
$('.slider_center').append('<div>Rack ' + i + '</div>')
}
}
})
}
{# 1 #}
create_racks()
{# 2 #}
$('.slider_center').append('<div>Rack ' + '1' + '</div>')
$('.slider_center').append('<div>Rack ' + '2' + '</div>')
</script>
У меня 2 работает, а 1 почему-то нет... Почему?
возможно success никогда не наступает
Нет, он рисует, что надо, но карусель эти элементы не захватывает
я думаю что карусель твоя инициализируется до того, как прилетают данные, а обновления в DOM она не подтягивает уже после инициализации (что логично)
Но вообще оно выглядит вот так, т.е. файл с каруселью вызывается после: <script type="text/javascript">function create_racks() { $.ajax({ type: "POST", url: `http://${document.domain}:${location.port}/api/racks`, data: '', success: function (data) { for (let i = 1; i <= data.racks_count; i++) { $('.slider_center').append('<div>Rack ' + i + '</div>') } } }) } {# 1 #} create_racks() {# 2 #} $('.slider_center').append('<div>Rack ' + '1' + '</div>') $('.slider_center').append('<div>Rack ' + '2' + '</div>') </script> <script type="text/javascript" src="{{ url_for('static', filename='js/slots_list.js') }}"></script> А в файле js/slots_list.js стоит $(document).ready - т.е. оно ждёт, когда страница сформируется: $(document).ready(function () { $('.slider_center').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 5, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] }); });
Обсуждают сегодня