Load products inside owl carousel with ajax

JavaScript
1

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

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.