Question

I’ve created a page that load 4 products everytime you scroll down the page with codeigniter and Ajax.

I followed this tutorial for create pagination with codeigniter and jQuery.
Everything works fine, moreover I’ve changed the load type from database using Ajax.

I’ve got a problem with codeigniter.
When I try to get random record from the table I’ve got duplicate products.

This is the functions in codeigniter:

UPDATE CONTROLLER

function index()
{
  $this->load->helper('url');
  $data['description'] = "Description";
  $data['keywords'] = "Keywords";
  $data['products'] = $this->abitainterni->getAllProductsLimit();
  $data['get_products'] = $this->abitainterni->get_products();
  $this->load->view('welcome', $data);
}

function get_products($offset)
{
    $already_used = $this->input->post('already_used');
    $already = explode(',', $already_used);
    $data['products'] = $this->abitainterni->getAllProductsLimit($offset, $already);
    $arr['view'] = $this->load->view('get_products', $data, true);
    $bossy = '';

    foreach($data['products'] as $p) {
      $bossy .= $p->productID.',';
    }
    $arr['view'] = $bam;
    $arr['ids'] = $bossy;
    echo json_encode($arr);

    return;
}

UPDATE SCRIPT

<script type="text/javascript">

$(document).ready(function(){

<?
    $like_a_boss = "";

    foreach($products as $gp):
        $like_a_boss .= $gp->productID.',';
    endforeach;
?>

    var products = '<?= $like_a_boss; ?>';
    var loaded_products = 0;

    $(".loadMoreProducts").click(function(){
        loaded_products += 4;

        var dati = "welcome/get_products/" + loaded_products;

        $.ajax({
          url:'welcome/get_products/' + loaded_products,
          type: 'post',
          data: {already_used: products},
          cache: false,
          success: function(data) {

            var obj = $.parseJSON(data);

            $("#mainContainerProductWelcome").append(obj.view);
      already_used += obj.ids;

            if(loaded_products >= products - 4) {
                $(".loadMoreProducts").hide();
            } else {
                // load more still visible
            }
          },
          error: function() {
            // there's something wrong
          }
        });

        // show spinner on ajax request starts
        $(".loading-spinner").ajaxStart(function(){
            $(".loading-spinner").show();
            $(".text-load").hide();
        });

        // ajax request complets hide spinner
        $(".loading-spinner").ajaxStop(function(){
            $(".loading-spinner").delay(5000).hide();
            $(".text-load").show();
        });

        return false;
    });

    // submit form contact
    $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        // click on load more btn
        $(".loadMoreProducts").click();
        return false;
    }
});

});
</script>

Answer 1

you’ll need to keep track of the products you’ve already queried, throw their id’s in an array, and then use something like a where not in. So something like this:

    function getAllProductsLimit($offset=0, $already_used = array(0))
    {
      $this->db->order_by('productID', 'RANDOM');
      $this->db->where_not_in('productID', $already_used);
      $query = $this->db->get('product', 4, $offset);

      if($query->num_rows() > 0){
        return $query->result();
      } else {
        return 0;
      }
    }

NEW CONTROLLER

    function index()
    {
        $this->load->helper('url');
        $data['title'] = "Scopri i nostri prodotti";
        $data['description'] = "Description";
        $data['keywords'] = "Keywords";
        $data['products'] = $this->abitainterni->getAllProductsLimit();
        $data['get_products'] = $this->abitainterni->get_products();
        $this->load->view('welcome', $data);
    }

    function get_products($offset)
    {
        $already_used = $this->input->post('already_used');
        $already = explode(',', $already_used);
        $data['products'] = $this->abitainterni->getAllProductsLimit($offset, $already);
        $arr['view'] = $this->load->view('get_products', $data, true);
            $bossy = '';
    foreach($data['products'] as $p)
            {
        $bossy .= $->productID.',';
            }
            $arr['view'] = $bam;
            $arr['ids'] = $bossy;
echo json_encode($arr);
return;

    }

NEW SCRIPT

<script type="text/javascript">
$(document).ready(function(){

        <?
    $like_a_boss = '';
    foreach($get_products as $gp):?>
    $like_a_boss .= $gp->productID.',';
    endforeach;?>

    var products = '<?= $like_a_boss; ?>';
    var loaded_products = 0;

    $(".loadMoreProducts").click(function(){
        loaded_products += 4;

        var dati = "welcome/get_products/" + loaded_products;

        $.ajax({
          url:'welcome/get_products/' + loaded_products,
          type: 'post',
          data: {already_used: products},
          cache: false,
          success: function(data) {
            var obj = $.parseJSON(data);

            $("#mainContainerProductWelcome").append(obj.view);
            already_used += obj.ids;           

            if(loaded_products >= products - 4) {
                $(".loadMoreProducts").hide();
            } else {
                // load more still visible
            }
          },
          error: function() {
            // there's something wrong
          }
        });

        // show spinner on ajax request starts
        $(".loading-spinner").ajaxStart(function(){
            $(".loading-spinner").show();
            $(".text-load").hide();
        });

        // ajax request complets hide spinner
        $(".loading-spinner").ajaxStop(function(){
            $(".loading-spinner").delay(5000).hide();
            $(".text-load").show();
        });

        return false;
    });

    // submit form contact
    $(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        // click on load more btn
        $(".loadMoreProducts").click();
        return false;
    }
});

});
</script>

Then whereever your using that function, before you echo out your results to your ajax function, run a quick foreach to add the ids of the products you just got to the already used array. You can either store this is session, or pass it back and forth between your ajax stuff, or if your ajax stuff is written fine, you don’t need to worry about it, just attach the product id’s to each product you’re displaying using a data attribute or something and generate the array that way.