Home/ Questions/Q 9173215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:32:15+00:00

I need to load data on scroll event. After searching for it, I got

  • 0

I need to load data on scroll event. After searching for it, I got a code from this site: Code to load data on scroll.

They have 2 classes in php named Demo and MiscellaneousModel.
I used the same code just changed the name of the table.

Demo.php

<?php
  class Demo extends Controller {

function Demo(){
    parent::Controller();       
    $this->load->model('MiscellaneousModel');       
}

public function index(){
    $query = $this->MiscellaneousModel->getPhotos();
    echo json_encode (array($query));       
}
 }
?>

MiscellaneousModel.php

<?php
   class MiscellaneousModel extends Model {
function MiscellaneousModel(){
    parent::Model();        
}

function getPhotos(){   
    $this->db->select("Photo_Id,url,title");
    $this->db->from('photos');              
    $query = $this->db->get();      
    return $query->result();            
}

   }
  ?>

test.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p{margin: 10px;
padding: 5px;}
#finalResult{
list-style-type: none;
margin: 10px;
padding: 5px;
width:300px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {          
    if ($(window).scrollTop() == ( $(document).height() - $(window).height())) {
        loadData();
    }
});

function loadData() {
    $.ajax({
        type: "post",
        url: "http://localhost/test/test.php",
        cache: false,               
        data:'',
        success: function(response){

            var obj = JSON.parse(response);
            try{
                var str = '';
                var items=[];   
                $.each(obj[0], function(i,val)
                                    {                                                           
                                                items.push($('<li/>').text(val.url));
                                                items.push($('<li/>').text(val.title));
                }); 

                $('#finalResult').fadeOut('slow', function() {
                $(this).append(str).fadeIn('slow').fadeIn(3000);
                $('#finalResult').css({backgroundColor: ''});
             $('#finalResult').append.apply($('#finalResult'),items);
                }).css({backgroundColor: '#D4ED91'});

            }catch(e) {     
                alert('Exception while request..');
            }       
        },
        error: function(){                      
            alert('Error while request..');
        }
     });


}

});
</script>
</head>
<body>      
<h1>Load data on page scroll using jQuery Php Codeigniter and Mysql  </h1>  
<ul id="finalResult">
</ul>   
</body>
</html>

I am completely new to json. So please tell me where am i getting wrong. I also want to know how is the connection to database made in json. I mean in the example on the site i mentioned, i could not understand how was the connection made to database.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Save this in a file. Call it whatever, dbCalls.php for simplicity 

    class db{
    protected $db = NULL;

    public function __construct(){
        $this->db = new mysqli('localhost', 'username', 'password', 'database');
    }

    public function getPhotos(){
        $stmt  = $this->db->query('SELECT Photo_Id, url, title FROM photos');

        $rows = array();
        while($row = $stmt->fetch_assoc()):
            $rows[] = $row;
        endwhile;   

        return json_encode($rows);
    }
}

    Now make a new file. controller.php.

    include_once('dbCalls.php');
$db = new db; //instantiate class

if(!empty($_GET['getPhotos'])):
    echo $db->getPhotos(); //send the json encoded photos back
endif;

    Now change your ajax function like so.

    $.ajax({
    type: "GET",
    url: "http://localhost/test/controller.php",
    cache: false,               
    data:'getPhotos=1',
    dataType:'json',
    success:function(json){
        $.each(json, function(i,row){
            //assuming your rows were just simple rows, and you used the above code..
            console.log(row.Photo_Id, row.url, row.title);
        });
    }
});

    You can substite that call to the console with whatever jQuery functions you want to use to manipulate the response.

    • 0