Load more in php mysql and jquery

Question

I am trying to provide option to load more post in php webpage for my school project.

Here are some of the php code.

    <?php
        $prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
            $record = array();
            while($row = mysql_fetch_assoc($prj)){
            $record[] = $row;
            }
     foreach($record as $rec){

                <div class="col-sm-1 col-md-4" id="<?php echo $rec['cid'];?>">
                    <div class="well">
                        <div class="media services-wrap55 wow fadeInDown">

                                <h4 class="media-heading"><?php echo $rec['Project_Name'];?></h4></a>
                                <p> by <i><?php echo $rec['user_name'];?></i></p>
                                            <p> <?php echo $rec['short_dis'];?></p>
                        </div>
                    </div>
                </div>

    ?>

<?php } ?>

<div class="col-sm-1 col-md-12">
    <div class="media services-wrap55 wow fadeInDown"> 
        <center><h3 class="media-heading"><div class="more" id="more">Load More Post</div></h3></center>
    </div>
</div>

Here is javascript code.

$(document).ready(function(){   
    $('#more').click(function(){

        var get_last_post_display=$('li:last').attr('id'); //get ip last <li>

        $('#more').html('<img src="ajax-loader.gif");
            $.ajax({                
                type: "POST",
                url: "more_prj.php",
                data: "last_id_post="+get_last_post_display, //send id ip last <li> to more_post.php
                cache: false,
                success: function(html){

                    $('ul').append(html);

                    $('#more').text('Load More Project'); //add text "Load More Post" to button again

                    if(!html){

                    $('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
                    }                   
                }
                });
        });                 
});

I have problem while configuring javascript below code. var get_last_post_display=$('li:last').attr('id'); It is configured for li and i want to configure it for div. I tried multiple times but no luck as i am not good with javascript.

Can you please advise me how to configure it.

Thanks.

Answer 1

Try with a class name

var get_last_post_display=$('.col-sm-1.col-md-4:last').attr('id');

UPDATE You can use json, because sometimes you can get 404 page or another content and it will cause a problem, with a json you can be sure, that you got the needed content.

more_prj.php

<?php
$prj = mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = '';
while($row = mysql_fetch_assoc($prj)) {
    $result .= '<div class="col-sm-1 col-md-4 unique-class" id="'.$row['cid'].'">
        <div class="well">
            <div class="media services-wrap55 wow fadeInDown">
                <h4 class="media-heading">'.$rec['Project_Name'].'</h4></a>
                <p> by <i>'.$rec['user_name'].'</i></p>
                <p>'.$rec['short_dis'].'</p>
            </div>
        </div>
    </div>';
}

//if($result) maybe some condition to check if you have any data?
$result .= 
'<div class="col-sm-1 col-md-12">
    <div class="media services-wrap55 wow fadeInDown"> 
        <center><h3 class="media-heading"><div class="more" id="more">Load More Post</div></h3></center>
    </div>
</div>';

echo json_encode($result);

js script

$(document).ready(function() {
    $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html) {
                $('div').append(html);//$('.main-div') ?
                $('#more').text('Load More Project'); //add text "Load More Post" to button again
            } else {
                $('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    });
});