I want to get the parent category list on the slider by clicking the main category’s slider list. the second category’s sider is not working when I click the main category.
$(‘.maincategory’).owlCarousel({ });
$(".box").on("click", function(){ var value= this.id.toString(); var csr =$("input[name=csrfmiddlewaretoken]").val(); debugger $.ajax({ url: 'getParentCategory', type: 'POST', data: { id: value, csrfmiddlewaretoken: csr }, success: function (response) { data = response.results AppendData(data); } }); }); function AppendData(data){ $(".secondCategory").empty(); debugger; var htmls = ''; if(data.length != 0){ for (var i = 0; i < data.length; i++) { htmls += '<div class="item eight-card-single text-center">' htmls += '<a id="{{value.id}}" class="second-category category">' htmls +='<img src="/media/uploads/products/logo.jpg">' htmls +='<h5 id="'+ data[i].name +'" class="card-title">'+ data[i].name +'</h5>' htmls +='</a>' htmls +='</div>' } $(".secondCategory").append(htmls); $('.secondCategory').owlCarousel({ }); } else { $(".secondCategory").append("No data"); } };
Advertisement
Answer
The .empty()
method clears element content but doesn’t destroy the existing Owl carousel instance on that element, you need to this with $(".secondCategory").trigger("destroy.owl.carousel")
before setting the new html content and creating a new Owl carousel instance.