Load More Content using Ajax/jQuery by returning <div>

Question

I'm working on a social site something like facebook where when you drag to the bottom of the page, new content will load. Instead, my page will have a more button instead of scrolling. Whenever a user click on the 'more' button, new content will load at the bottom.

My page consist of three different columns. So, what I would like to do is adding 3 new different content to those 3 columns when the 'more' button is clicked.

I would like to return a new div content inside the main column div using ajax and php. Something like this below.

<div class='content_3'>
  <div class='widget'>
    Content Here
  </div>
</div>

Below is an example of my page... Fiddle here http://jsfiddle.net/Lqetw5ck/2/

<div id='main_column_1'>
    <div id='content_1'>
        Load data from php/mysql database (For 1st Main Div)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
<br>
<div id='main_column_2'>
    <div id='content_1'>
        Load data from php/mysql database (For 2nd Main Dev)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
<br>
<div id='main_column_3'>
    <div id='content_1'>
        Load data from php/mysql database (For 3rd Main Dev)
    </div>
    <div id='content_2'>
        Load more from php/mysql database when 'more' button is click
    </div>
</div>
    <button>Show More</button>

And how should I write my PHP code? Because I'm going to return a whole div content. The idea I had is something like this below.

<?
$sql_stmt = "SELECT * FROM customers";
$sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con));
$row = mysqli_fetch_assoc($sql);
$content = '<div class="content_3"><div class="widget"> '.$row['firstname'].' </div></div>';
?>

I want to return the $content string back to the main column 1,2 and 3 so it will display a new div under that column.

Thanks!

EDIT: I found this How to implement jScroll? but don't know how the author wrote his PHP code. Maybe this is almost the same as my case?

Answer 1

I'm glad to show you a raw implementation on you question:

1. Make a server-side data.php to serve data:

<?php // data.php
    $page_index = intval($_GET['page_index']); 
    $page_size = intval($_GET['page_size']);
    $skip = ($page_index-1) * $page_size;
    $data = my_query("
        select * from my_table
        limit $skip, $page_size;
    "); // the my_query function executes the sql query and return the dataset.
    echo json_encode($data);
?>

After this, you can fetch the paged data with request with url:

/data.php?page_index=1&page_size=10 for the first page data, and

/data.php?page_index=2&page_size=10 for the second page data;

and so on.

2. Make the fetch function with jQuery

var current_page = 1;
var fetch_lock = false;
var fetch_page = function() {
    if(fetch_lock) return;
    fetch_lock = true;
    $.getJSON('/data.php', {page_index: current_page; page_size: 10}, function(data) {
        // render your data here.
        current_page += 1;
        if(data.length == 0) {
            // hide the `more` tag, show that there are no more data.
            // do not disable the lock in this case.
        }
        else {
            fetch_lock = false;
        }
    });
}

3. Bind the event to trigger fetch_page .

We want the fetch_page trigger when the below case matches:

1. when page loaded (first data page).
2. when page scrolled to bottom.
3. clicking the more button.

You can decide whether the second or the third effect is better, and I will show you the implementation:

$(function() {

    // the definition above.
    // ...

    // 1. on page loaded.
    fetch_page();

    // 2. on scroll to bottom
    $(window).scroll(function() {
        if($('body').scrollTop() + $(window).height() == $('body').height()) {
            fetch_page();
        }
    });

    // 3. on the `more` tag clicked.
    $('.more').click(fetch_page);

});

So you can try to code the effect this way, it's not too difficult, have a try, good luck!

Answer 2

Limit Offset

This is two things you have to understand first first time when page loaded it loaded like this:

SELECT * FROM customers LIMIT 10 OFFSET 0

Second time when show more button click it sends value of Limit and OFFSET

SELECT * FROM customers LIMIT 10 OFFSET 10

Code should be backend like:

$Limit = $_GET['limit'];
$Offset = $_GET['offset'];
$sql_stmt = "SELECT * FROM customers LIMIT $Limit OFFSET $Offset";
$sql = mysqli_query($con, $sql_stmt) or die(mysqli_error($con));

Note: assuming that you are using GET request.

Answer 3

http://jsfiddle.net/Lqetw5ck/4/

HTML

<div id='main_column_1'>
    <div id='content_1'>
        Load data from php/mysql database (For 1st Main Div)
    </div>
</div>
    <button id="show">Show More</button>

JS

$('#show').on('click', function() {
    //send a ajax request here and set html equal to data recevide by ajax

    html = '<div>'
            +'Load data from php/mysql database (For 1st Main Div)'
        +'</div>';
    $('#main_column_1').append(html);
});

This might help you for creating a ui view of loading more data. You can do the php thing using Manwal's answer