Organize data based on timestamp with AJAX autoload

Question

Im using this answer right here: https://stackoverflow.com/a/30513954/4892914

And it works well on SELECT * FROM MOCK_DATA ORDER BY date DESC. But i would like to add the function to "autoload" the content. But I'm having a hard time to implement this.

I actually tried following this tutorial: http://www.smarttutorials.net/infinite-scroll-using-jquery-ajax-php-and-mysql/

Im trying to fetch the data in json format, from my controller:

public function ajaxtest(){
    $this->View->renderJSON(array(
  'mockup' => UserModel::ajax(Request::post('start'), Request::post('limit'))
        ));

The Request::post('start') and Request::post('limit') is just added plain HTML in the index.php

<form>
<input type="hidden" id="first" value="0">
<input type="hidden" id="limit" value="4">
</form>

And the Model query looks like this:

public static function ajax($start = 0, $limit = 4){

    $database = DatabaseFactory::getFactory()->getConnection();

$sql = 'SELECT * FROM MOCK_DATA ORDER BY date DESC LIMIT :start, :limit';
$query = $database->prepare($sql);
$query->bindValue(':start', intval($start), PDO::PARAM_INT);
$query->bindValue(':limit', intval($limit), PDO::PARAM_INT);
$query->execute();

    if($query->rowCount() < 0){
        return false; 
    } 
    return json_encode($query->fetchAll());
}

I i have tried returning the query with json_encode but still getting error No more data to show.

$decoded = json_decode($this->mockup);

//CREATE AN ARRAY OF THE REPLACEMENTS YOU WANT
$aArray = array();
$aArray[date('Y-m-d')] = 'Today - Idag';
$aArray[date('Y-m-d', mktime(0, 0, 0, date('n'), date('j') - 1, date('Y')))] = 'Yesterday - Igår';
$aArray[date('Y-m-d', mktime(0, 0, 0, date('n'), date('j') - 2, date('Y')))] = 'Day before Yesterday - Förrgår';
$aArray['2013-12-25'] = 'Christmas 2013';

//INITIALIZE SOME VARIABLES
$cLastHeader = '';
$cCurrHeader = '';

//THIS WOULD BE YOUR QUERY RESULTS LOOP
//foreach ($rows AS $nNull => $cDate) {
foreach ($decoded AS $key => $value) {
    $cLookup = substr($value->date, 0, 10);  //TRIM OUT THE TIME FROM CURRENT RECORD

    //IS DATE IN ARRAY? IF NOT, FORMAT
    if (isset($aArray[$cLookup])) {
        $cCurrHeader = $aArray[$cLookup];
    } else {
        $cCurrHeader = $cLookup; //WOULD SHOW 'YYYY-MM-DD'
        $cCurrHeader = date('F Y', strtotime($cLookup)); //WOULD SHOW 'MONTH YYYY'
    }

    //HAS HEADER CHANGED? IF SO PRINT
    if ($cCurrHeader != $cLastHeader) {
        $cLastHeader = $cCurrHeader;
        print($cCurrHeader . "\n");
    }

    //PRINT RECORD
   // print("\t" . $cDate . "<br>");
    echo '<h4>'. $value->date . ' <small>'.$value->email.'</small></h4>';
    echo '<div class="content">'.$value->text .'</div><br>';
}

Here is the AJAX code

flag = true;
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()){
        first = $('#first').val();
        limit = $('#limit').val();
        no_data = true;
        if(flag && no_data){
            flag = false;
            $('#loader').show();
            $.ajax({
                url : 'http://localhost:8888/dashboard/ajaxtest',
                dataType: "json",
                method: 'post',
                data: {
                   start : first,
                   limit : limit
                },
                success: function( data ) {
                    flag = true;
                    $('#loader').hide();
                    if(data.count > 0 ){
                        first = parseInt($('#first').val());
                        limit = parseInt($('#limit').val());
                        $('#first').val( first+limit );
                        $('#timeline-conatiner').append('<h4>'+date+' <small>'+email+'</small></h4>');
                        $.each(data.content, function(key, value ){
                            html = '<div class="content">';
                            html += '<p>'+value.text+'</p>';
                            html += '</div>';
                            $('#timeline-conatiner').append( html );
                        });
                        year--;
                    }else{
                        // alert('No more data to show');
                        no_data = false;
                    $('#timeline-conatiner').append('No more data to show');
                    }
                },
                error: function( data ){
                    flag = true;
                    $('#loader').hide();
                    no_data = false;
                    // alert('Something went wrong, Please contact admin');
                    $('#timeline-conatiner').append('Something went wrong, Please contact admin');

                }
            });
        }           
    }
});

How can i troubleshoot this?