Problem with jquery ajax owl carousel

Hope some can help!

I am using the jobber theme which has an owl carousel. The carousel works fine with static data, but I need to feed in data from an ajax request. I can’t seem to get this working.

Here some of my code:

in index.php

<section class="space-ptb">
<div class="container">
<div class="row">
  <div class="col-12">
    <div class="section-title center">
      <h2 class="title">Featured Executives</h2>
      <p>Some catchy title here....</p>
    </div>
  </div>
  <div class="col-12">
    <div class="owl-carousel owl-nav-bottom-center" id="owl-demo" data-nav-arrow="false" data-nav-dots="true" data-items="4" data-md-items="3" data-sm-items="2" data-xs-items="1" data-xx-items="1" data-space="15" data-autoheight="true">
  </div>
  </div>
 </div>
</div>
</section>

<script>
$(document).ready(function(){
// get latest executives
$.ajax({
type: "POST",
url: "queries/getLatest.php",
dataType: 'html',
success: function(data){

  $('#owl-demo').trigger('destroy.owl.carousel');
  
  $('#owl-demo').owlCarousel().trigger('add.owl.carousel', [jQuery('<div class="item">' + data +'</div>')]).trigger('refresh.owl.carousel');
 
}
});

});
</script>

in getLatest.php:

<?php
require_once("../dbconnect/db.php");

$today = strtotime("now");;
$days_to_subtract = (60*60*24)*$row_settings['days_updated'];
$today = $today - $days_to_subtract;
$query = "SELECT * FROM $table_persons WHERE status='1' AND ts >= $today AND ts != '1' AND person_id!='103050' AND person_id!='103053' ORDER BY ts DESC LIMIT 6";
$result = mysqli_query($conn,$query) or die(mysqli_error());

while($row = mysqli_fetch_assoc($result)) {
?> 
<div class="item"><div class='candidate-list candidate-grid'><div class='candidate-list-image'><img src='https://thedecisionmakers.co.uk/img/faces/small/<?php echo $row['pers_img'];?>' class='img-fluid'></div><div class='candidate-list-details'><div class='candidate-list-info'><div class='candidate-list-title'><h5><a href='#'><?php echo $row['name'];?></a></h5></div><div class='candidate-list-option'><ul class='list-unstyled'><li><i class='fas fa-filter pr-1'></i><?php echo $row['company'];?></li><li><i class='fas fa-map-marker-alt pr-1'></i>Ormskirk Rd, Wigan</li></ul></div></div></div><div class='candidate-list-favourite-time'><a class='candidate-list-favourite order-2' href='#'><i class='far fa-heart'></i></a><span class='candidate-list-time order-1'><i class='far fa-clock pr-1'></i>3D ago</span></div></div></div>  
<?php
}
?>

This gives me:

Nothing is sliding and the people are vertically stacked instead of horizontal.

Many thanks for any help!

Well, I managed to fix the issue myself.

For the benefit of others, this is what I did:

I changed the approach. Instead of creating the html in the exterior file, I created a json array of the database results and then used that in the main file. Not that this matters, but for the sake of completeness here is the code.


in index.php

the javascript:

$(document).ready(function(){
// get latest executives
$.ajax({
type: "POST",
url: "queries/getLatest.php",
dataType: 'json',
cache: false,
success: function(data){

var content1 = '';
  
  $.each(data,function(i,j){
  
	 content1 = "<div class='item'><div class='candidate-list candidate-grid'><div class='candidate-list-image'><img src='https://thedecisionmakers.co.uk/img/faces/small/" + j.pers_img + "' class='img-fluid'></div><div class='candidate-list-details'><div class='candidate-list-info'><div class='candidate-list-title'><h5><a href='#'>" + j.first_names + " " + j.name + "</a></h5></div><div class='candidate-list-option'><ul class='list-unstyled'><li><i class='fas fa-filter pr-1'></i>" + j.company +"</li><li><i class='fas fa-map-marker-alt pr-1'></i>Ormskirk Rd, Wigan</li></ul></div></div></div><div class='candidate-list-favourite-time'><a class='candidate-list-favourite order-2' href='#'><i class='far fa-heart'></i></a><span class='candidate-list-time order-1'><i class='far fa-clock pr-1'></i>" + j.last_updated + "</span></div></div></div>";
  
   $('#owl-demo').owlCarousel().trigger('add.owl.carousel', [jQuery(content1)]).trigger('refresh.owl.carousel');
  
  });	 
}
});

});

the html

<section class="space-ptb">
 <div class="container">
   <div class="row">
    <div class="col-12">
      <div class="section-title center">
        <h2 class="title">Featured Executives</h2>
        <p>Some catchy title here....</p>
      </div>
    </div>
    <div class="col-12">
      <div class="owl-carousel owl-nav-bottom-center" id="owl-demo" data-nav-arrow="false" data-nav-dots="true" data-items="4" data-md-items="3" data-sm-items="2" data-xs-items="1" data-xx-items="1" data-space="15" data-autoheight="true">
    <!-- Dynamic data here -->
  </div>
  </div>
</div>
</div>
</section>

in getLatest.php

<?php
require_once("../dbconnect/db.php");

$today = strtotime("now");;
$days_to_subtract = (60*60*24)*$row_settings['days_updated'];
$today = $today - $days_to_subtract;
$query = "SELECT * FROM $table_persons WHERE status='1' AND ts >= $today AND ts != '1' AND person_id!='103050' AND person_id!='103053' ORDER BY ts DESC LIMIT 6";
$result = mysqli_query($conn,$query) or die(mysqli_error($conn));

while($row = mysqli_fetch_assoc($result)) {
 $last_updated = date("d-m-Y H:i",$row['ts']);
if($row['pers_img'] != ''){
$response[] = array("pers_img"=>$row['pers_img'],"salutation"=>$row['salutation'],"first_names"=>$row['first_names'],"name"=>$row['name'],"company"=>$row['company'],"last_updated"=>$last_updated);
}
}
echo json_encode($response);
?>

The important line is ‘$(’#owl-demo’).owlCarousel().trigger(‘add.owl.carousel’,[jQuery(content1)]).trigger(‘refresh.owl.carousel’);’ .
This line updates the content of the carousel.

Hope this helps someone!