OwlCarousel2 / OwlCarousel2

DEPRECATED jQuery Responsive Carousel.

Home Page:http://owlcarousel2.github.io/OwlCarousel2/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Calling OwlCarousel with Ajax null value is inserted before owl-stage-outer

RakArthus opened this issue · comments

I have a list of news displayed inside items of carousel
Above this list I have buttons to filter news by period : this week, next week, 2 weeks after.
By default, the main page load correctly the carousel with items/news
On click period button Ajax query display items/news corresponding to selected period

  1. On click button period the content of owlCarousel ($('#ThumbnailsEvent_1')) is emptied, owlCarousel is destroyed and Ajax success "theeventdate" is called with .html(theeventdate) or .append(theeventdate).
  2. The owlCarousel is generate and items display but after div#ThumbnailsEvent_1.owl-carousel and before div.owl-stage-outer this value " 0" is inserted .

I have searched all of my files, html, jquery and php and I can't find anywhere a variable, a function or var_dump or console.log that could display this value (" 0") with a space before the 0 only when calling ajax.
I use Ajax in many cases on my website and I don't have a null value displayed before.

Do you know where come from this issue ? OwlCarousel, Ajax , only my code/script ?

$(document).on('click', 'filterperiod', function(e){
   		e.preventDefault();
   		var selected = $(this);
   		var idrangedate = selected.data('date');

   		$.ajax({
   			url: wpAjax.ajaxUrl,
   			data: {action:'filter_date',idrangedate: idrangedate},
   			type: 'post',
   			beforeSend: function () { 
   				$('.c_loader').removeClass('dnone-i');
   				$('filterperiod').removeClass('active');
   			},
   			success: function(eventsdate){
   				$('#ThumbnailsEvent_1').html("");
   				$('#ThumbnailsEvent_1').owlCarousel('destroy');
   				
   				$('#ThumbnailsEvent_1').append(eventsdate);
   				var owlOptions = {
   					nav:true,
   					loop: false,
   					dots:false,
   					autoWidth:true,
   					margin:8,
   					stageOuterClass: 'owl-stage-outer ounset',
   					dotsClass:'owl-dots pabso w-100 pbottom-50',
   					slideBy:2,
   				}; //set options in variable
   				$('#ThumbnailsEvent_1').owlCarousel(owlOptions);
   				selected.addClass('active');
   				
   			},
   			complete: function () { 
   				$('.c_loader').addClass('dnone-i'); 
   			},
   			error: function(result){
   				console.warn(result);
   			}
   		});
   	});

This issue was not due to OWL but by Wordpress Ajax loop