Question

124

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

rated 0 times [ 128] [ 4] / answers: 1 / hits: 21716 / 10 Years ago, fri, september 5, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

haylie

Add To Favorites

Follow

Total Points: 26

Total Questions: 108

Total Answers: 104

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

answered 10 Years ago keyonna · Accepted Answer

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:

when page loaded (first data page).

when page scrolled to bottom.

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!