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!