Load more status from database

1
votes

HI! I want to create a "Load more status" button att the bottom at the feed" right now as you can se from the code i've set a limit to 20 posts.

What im looking for is A Jquery or javascript function (maybe AJAX) that changes the 

$statusQ = "SELECT * FROM `status` order by id desc LIMIT 20";

to

$statusQ = "SELECT * FROM `status` order by id desc LIMIT 40";

I Just want to change the LIMIT and refresh the request to the server without updating the HTML, javascript and CSS.

IS there a good way to do this.

Pls note that i've googled this alot and i've only found examples that not really good with my code.

<?php
    $statusQ = "SELECT * FROM `status` order by id desc LIMIT 20";
    $how_meny_rows = mysqli_query($mysqli, "SELECT * FROM `status`");
    $row_cnt = mysqli_num_rows($how_meny_rows);
    $statusA = mysqli_query($mysqli,$statusQ);

    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }
    if ($row_cnt > 20) {
        echo '<div class="loadstatus">
                <a href="javascript:void(0);" onclick="" class="comingsoon"> klicka för att ladda flerstatusar </a>     </div>';
    } 
    ?>
4
javascriptphpjqueryajax
Hint: change the LIMIT clause to this: LIMIT 0, 20 Then move the 0 to a variable (it's an offset), and whenever you need more results, send x*number of items you want via Ajax to your script and then just append the output. This approach requires writing the Ajax request and the PHP code for managing it, though, and that falls in the category 'HTML/Javascript updating' - NorthBridge

4 Answers

2
votes

You can achieve 'Load More' functionality by using jQuery Ajax.

Load first 20 status records in main page & On clicking comingsoon link, call another page moreResults.php using jQuery $.ajax method.

In moreResults.phppage get the proper results according to the limit. Limit value will be passed into moreResults.php using `qry_limit' js variable.

This value will be retrieved from qry_limit hidden variable. On success, Append the loaded results into statusDiv div & update the limit value for loading next bunch of records.

Just try this.

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type"text/javascript">
$(document).ready(function(){
    $('a.comingsoon').click(function () {
        var qry_limit = $("#qry_limit").val();

            $.ajax({
                type: "POST",
                url: "moreResults.php",
                data: "limit="+qry_limit,
                cache: false,
                success: function(responseData){
                    var newLimit=qry_limit+20;
                    $("div#statusDiv").append(responseData);
                    $("#qry_limit").val(newLimit); 
                }
            });


        return false;
    });
});
</script>
</head>
<body>
<?php

    $statusQ = "SELECT * FROM `status` order by id desc LIMIT 0,20";
    $how_meny_rows = mysql_query($mysqli, "SELECT * FROM `status`");
    $row_cnt = mysqli_num_rows($how_meny_rows);
    $statusA = mysql_query($mysqli,$statusQ);
     echo '<div id="statusDiv">';
    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }
    echo '</div>';
    if ($row_cnt > 20) {
        echo '<div class="loadstatus">
                <a href="javascript:void(0);" onclick="" class="comingsoon"> klicka för att ladda flerstatusar </a>     </div>';
    } 
    ?>
    <input type="hidden" name="qry_limit" id="qry_limit" value="20"/>
    <input type="hidden" name="total_results" id="total_results" value="<?php echo $row_cnt; ?>"/>
    </body>
    </html>

moreResults.php

<?php
    //Database Connections
    $limit=$_REQUEST['limit'];
    $statusQ = "SELECT * FROM `status` order by id desc LIMIT $limit,20";

    $statusA = mysqli_query($mysqli,$statusQ);

    while ($row = mysqli_fetch_array($statusA)){

      echo '<div class="statusholder">
                <div class="status-img">
                    <img src="' . $row['Bild'] . '"/>
                </div>
                <div class="this-status">
                    <h4 class="status-who">'. $row['user'] .'</h4>
                    <p class="status">' .$row['status']. '</p>
                    <a class="status-like" href="javascript" onclick""> Gilla</a>
                    <p class="num_like comingsoon">' . $row['like'] . '</p>
                    <a class="status-comment" href="javascript" onclick"">Kommentera detta</a>
                    <p class="status-timestamp">' . $row['timestamp'] . '</p>

                </div>
            </div>';


    }

    ?>
1
votes

Move the query to a separate php file with a cleaned get input for the limit and then use jquery's Ajax functionality to call the php file with the value of the limit you need. It's a bit risky though. If I were you I'd read up on PDO and Prepared statements.

1
votes

You could make a jQuery post request to a PHP script that outputs another 20 feeds, and then display the result in your current page. Here's an example:

<script>
$(document).ready(function() {
    $("#loadMoreButton").clicked(function() {
        $.post(
            "anotherPage.php",
            { dummy: "" },
            function(returnedData) {
                $("#loadMoreButton").before(returnedData);
                }
            );
        });
    });
</script>

Suppose you have the above jQuery, and your current page is something like the following:

<div id="feeds"> The feeds appear here </div>
<button id="loadMoreButton">Load more posts</button>

Then, your anotherPage.php file will contain something like the following:

<?php
if (isset($_POST['dummy']) {
    /* Database operations to load the next twenty posts */
    /* Also, you will echo them here like you do in a normal page */
}
?>

However, instead of loading the posts all over again, you should pass anotherPage.php the id of the latest post that was displayed, and then load only the posts after that.

EDIT: Thanks to @NorthBridge for pointing out an easy way to do it (see his comment) :)

1
votes

EDIT on Jesons awnser.

You have to add this code 

'qry_limit = parseInt(qry_limit);'

To turn yoour qry_limit value into a Int instead of a string