jquery — Карусель сов не создана должным образом с помощью вызова AJAX / PHP

Я пытаюсь преобразовать 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?

0

Решение

Вы должны перезапустить карусель (восстановить) в вызове Ajax. После этого, когда новые элементы добавляются на страницу

function addCarousel(date){
date = new Date(date);
$.post("php/addCarousel.php", {date : date}, function(data){
$('#ajaxResponse').html(data);
$("#owl-demo").owlCarousel();
});
}
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]