<div class="row padleft w50p" style="float: left;">
	<div class="col-md-12" style="padding: 0">
     <div class="title">
         <h2 class="blocktitle">My Courses</h2>
     </div>
</div>
</div>
<div class="row padleft">
	<?php //echo $this->element('mycourse');?>
</div>
    <div class="icspan12">
  <?php 
	$items_per_group = 5;
  $enrolles = $enrolles ?? array();
	$arr_enrolledList = sizeof($enrolles); 
	$total_groups= ceil($arr_enrolledList/$items_per_group);
	?>
	<script type="text/javascript">
    $(document).ready(function() {
    var path='<?php echo $this->webroot?>';

            var track_load = 0; //total loaded record group(s)
            var loading  = false; //to prevents multipal ajax loads
            var total_groups = '<?php echo $total_groups;?>'; //total record group(s)

            $('#results').load(path+"courseroles/enrolledload", {'group_no':track_load}, function() {track_load++;}); //load first group

                    $('.partA').bind('scroll', function()
                    {
                    	//alert(track_load);
                        
                      if($(this).scrollTop() + $(this).innerHeight()+150>=$(this)[0].scrollHeight)
                      {
                    	  
                              if(track_load <= total_groups && loading==false) //there's more data to load
                                    {
                                            	
                                            loading = true; //prevent further ajax loading
                                            $('.animation_image').show(); //show loading image

                                            //load data from the server using a HTTP POST request
                                            $.post(path+"courseroles/enrolledload",{'group_no': track_load}, function(data){

                                                    $("#results").append(data); //append received data into the element

                                                    //hide loading image
                                                    $('.animation_image').hide(); //hide loading image once data is received

                                                    track_load++; //loaded group increment
                                                    loading = false; 

                                            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                                                    alert(thrownError); //alert with HTTP error
                                                    $('.animation_image').hide(); //hide loading image
                                                    loading = false;

                                            });

                                    }
                      }
             });
    });
    
</script>
	
<ol id="results">
	</ol>
<div class="animation_image" style="display:none" align="center"><img src="<?php echo $this->webroot;?>img/ajax-loader.gif"></div>
   </div>
   
  