How to show more list using jquery

Question

I pull out messages and display with PHP/MySQL.

Now I want to show only 10 lists.

And I want to add button. When I click this button it slides down smoothly and shows another 10, total 20 messages.

And if I click the button it again slide down and shows total 30 messages.

Could anyone teache me how to do it with jquery please?

Thanks in advance.

Answer 1

Use javascript to hold state information about how many rows are being displayed, etc.

Have the button invoke a JS function that returns data via ajax. The result from the ajax call can be HTML and injected into a div tag. The JS function needs to update the state information (increasing the # of rows each time, etc), and passes that state info to the ajax call.

The target of the ajax call can be a PHP script that does the MySQL query and generates the HTML which is passed back.

Answer 2

In principle, you want a container where to place all the newly fetched messages.

<div id="messages">
    <! -- message 1 -->
    <! -- message 2 -->
    <div id="newMessages">
    </div>
</div>

Then you want a button (or anchor, or whatever) that you can hook up to a fetch-more-method:

<input type="button" value="Fetch more messages" id="btnFetchMessages" />

Place the hookup somewhere inside DOMReady:

var lastFetchedMessage = 0;

$('#btnFetchMessages').click(function() {
    $.ajax({
        url: '/getMessages.php',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: '{"lastId":'+lastFetchedMesasge+'"}',
        success: newMessagesReceived
});

So on a click of the button we submit an AJAX request to getMessages.php where you'll look at the lastFetchedMessage and return the 10 or so next messages based upon that. From that page, you return a JSON array containing the messages, with all their info that you're interested in.

Upon a successful AJAX reques, the funciton newMessagesReceived will be called:

function newMessagesReceived(result) {
    var container = $('#newMessages');

    for(var i = 0; i < result.length; i++) {
        var message = $('<div>' + result[i].body + '</div>');
        container.append(message);
    }

    var lastFetchedMessage = result[i].id;
}

The above assumes that you return an array with messages, that have at least the properties body and id:

[ { "body": "new message1", "id": "10" }, { "body": "new message2", "id": "11" } ]

Answer 3

In my latest project, I use jQuery tools scrollable to display 20 newest item in a list (<ul><li>). When the list scrolled to the last page, I fetch next 20 items, then append it to the end of the list, using build in jquery tools api. This will go on until the AJAX request return empty result, that indicate no more list in the database. I have a variable as a flag, then I set it to false, so no AJAX request fired when the list scrolled to the last page.

You may see it looks like twitter home page, but without 'more' link, since the list appended automatically.

Unfortunately right now the project still in alpha, so I cannot show it here. You may try it and post your code here, and I will help you tweak it.