Я пытаюсь преобразовать Owl Carousel для хранения данных, извлеченных из базы данных. Используя кнопку:
<button onclick="addCarousel('2015-06-11')">Test</button>
Я вызываю функцию AJAX (дата пока не имеет значения):
function addCarousel(date){
date = new Date(date);
$.post("php/addCarousel.php", {date : date}, function(data){
$('#ajaxResponse').html(data);
});
}:
который извлекает данные, используя PHP (статический скрипт на данный момент):
Echo
'<div id="owl-demo" class="owl-carousel">
<div class="scrollDay"><h1>0</h1></div>
<div class="scrollDay"><h1>1</h1></div>
<div class="scrollDay"><h1>2</h1></div>
<div class="scrollDay"><h1>3</h1></div>
<div class="scrollDay"><h1>4</h1></div>
<div class="scrollDay"><h1>5</h1></div>
<div class="scrollDay"><h1>6</h1></div>
<div class="scrollDay"><h1>7</h1></div>
<div class="scrollDay"><h1>8</h1></div>
<div class="scrollDay"><h1>9</h1></div>
<div class="scrollDay"><h1>10</h1></div>
<div class="scrollDay"><h1>11</h1></div>
<div class="scrollDay"><h1>12</h1></div>
<div class="scrollDay"><h1>13</h1></div>
<div class="scrollDay"><h1>14</h1></div>
<div class="scrollDay"><h1>15</h1></div>
</div>';
Который заполняет на моей странице индекса
<div id="ajaxResponse">
Data will go here
</div>
Если я вставляю элементы на страницу индекса напрямую, то карусель работает нормально, но не работает, когда я генерирую ее через php. Мои инструменты разработчика показывают, что эти элементы существуют на странице и нет ошибок консоли, но элементы по какой-то причине не отображаются. Я вручную display: block;
для всех элементов, но это не проблема.
Я думаю, что мне нужно заново создать экземпляр кода, но я не уверен, как и где это сделать. Я посмотрел в эти статьи Как заново инициализировать Owl Carousel после вызова ajax, Сова карусель не отображается, а также Позвони плагину. Я пытался создать экземпляр несколькими способами, но это немного чуждо мне.
Приведенное ниже описание отлично работает, когда элементы добавляются непосредственно на страницу индекса.
$(document).ready(function() {
var owl = $("#owl-demo"),
status = $("#owlStatus");
owl.owlCarousel({
navigation : true,
afterAction : afterAction
});
function updateResult(pos,value){
status.find(pos).find(".result").text(value);
}
function afterAction(){
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem);
updateResult(".prevItem", this.prevItem);
updateResult(".visibleItems", this.owl.visibleItems);
updateResult(".dragDirection", this.owl.dragDirection);
}
});
Как и где я могу создать экземпляр после запуска PHP?
Вы должны перезапустить карусель (восстановить) в вызове Ajax. После этого, когда новые элементы добавляются на страницу
function addCarousel(date){
date = new Date(date);
$.post("php/addCarousel.php", {date : date}, function(data){
$('#ajaxResponse').html(data);
$("#owl-demo").owlCarousel();
});
}
Других решений пока нет …