Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 955
nodeffect Avatar asked Sep 05 '14 03:09

nodeffect


3 Answers

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!

like image 178
Alfred Huang Avatar answered Nov 05 '22 14:11

Alfred Huang


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.

like image 38
Manwal Avatar answered Nov 05 '22 14:11

Manwal


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

like image 2
Cybersupernova Avatar answered Nov 05 '22 14:11

Cybersupernova