Hi all
I am easily able to load / update div content with ajax.
BUT I am having problem in loading ajax content inside OWL CAROUSEL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<?php
include('owl.carousel.css');
?>
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
.products-row{width:98%;border:1px solid #ada7a7; background-color:#FFFFFF; padding:10px;}
.product-item{width:30%; float:left; background-color:#FFFFFF; text-align:center; position:relative; margin:0 1.5% 0 1.5%; border:1px solid #FF0000}
.product-name{font-size:1em; float:none; width:90%; line-height:1.2em; margin:auto; height:4em}
</style>
</head>
<body>
<ul id="ajnav">
<li><a href="javascript:void(0);" onClick="getID(1)">DEVICES</a></li>
<li><a href="javascript:void(0);" onClick="getID(4)">HARDWARE</a></li>
</ul>
<div id="ajax_result"></div>
<script src="jquery-1.11.2.min.js"></script>
<script src="owl.carousel.js"></script>
<script type="text/javascript">
function getID(id)
{
$.ajax({
type: "POST",
url: "ajresult.php",
data: "id="+id,
success: function(data) {
$('#ajax_result').html(data);
}
});
}
</script>
<script type="text/javascript">
var owl = $(".lat-items");
owl.owlCarousel({
items : 4, //10 items above 1000px browser width
itemsDesktop : [1000,4], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2],
itemsMobile: [480,1],
navigation : false, // Show next and prev buttons
autoPlay: 4000,
stopOnHover : true,
slideSpeed : 300,
paginationSpeed : 500
});
$(".products-row .icon-left-open").click(function(){
$(".lat-items").trigger('owl.prev');
});
$(".products-row .icon-right-open").click(function(){
$(".lat-items").trigger('owl.next');
});
</script>
</body>
</html>
This is ajresult.php
<?php
$ctid = $_REQUEST['id'];
echo '<div class="products-row">';
echo '<ul class="lat-items owl-carousel">';
$qry="select * from product_table where category_id=$ctid limit 0,6";
$result=mysql_query($qry);
while($row=mysql_fetch_array($result))
{
echo '<li>
<div class="product-item">
<p class="product-name">'.$row_pr['product_name'].'</p>
</div>
</li>';
}
echo '</ul></div>';
?>
If i remove class “owl-carousel” from the ul below then the products start appearing but owl carousel doesnt works
echo '<ul class="lat-items owl-carousel">';
So as far as i am understanding is that ajax is loading and updating div content without owl carousel.
But the owl carousel is not loading ajax content. ??
dont know where is the problem ??
Has anyone used or loaded ajax content inside owl carousel ??
vineet