CODEWITHSUNDEEP
jqueryhtmljquery-selectors
Forrest
Forrest

Reputation: 721

Cannot get the last child of a class jquery

So I am implementing loading more data when users scroll pass a div in my index page.

My div to contain data:

<div class="container-fluid" id="post-data">

</div>

<div class="ajax-load text-center" style="display:none">
    <p><img src="http://demo.itsolutionstuff.com/plugin/loader.gif">Loading More post</p>
</div>

My jQuery script:

<script type="text/javascript">
    $(document).ready(function () {
        var first_id = <?php require_once 'php/functions.php'; echo get_smallest_post_id();?>;
        loadMoreData(first_id);
        $(document).on('scroll', function () {
            if ($(this).scrollTop() >= $('#post-data').position().top) {
                var last_id = $('#post-data').children('.row').last().id;
                loadMoreData(last_id);
                alert(last_id);
            }
        });
    });
    //Ajax load function
    function loadMoreData(last_id){
        $.ajax(
            {
                url: 'php/article.php?last_id=' + last_id,
                type: "post",
                beforeSend: function()
                {
                    $('.ajax-load').show();
                }
            })
            .done(function(data)
            {
                $('.ajax-load').hide();
                $("#post-data").append(data);
            })
            .fail(function(jqXHR, ajaxOptions, thrownError)
            {
                alert('server not responding...');
            });
    }
</script>

My article.php just return some rows:

<?php
..... (Fetch data in database)
while ($post = $select->fetch_assoc()) {
?>
<div class="row" id="<?php echo $post_id ?>">
    <div class="col-sm-4"><a href="#" class=""><img src="<?php echo $first_image_src ?>" class="img-responsive"></a>
    </div>
    <div class="col-sm-8">
        <h3 class="title"><?php echo $title ?></h3>
        <p class="text-muted"><span class="glyphicon glyphicon-lock"></span> Available Exclusively for Premium
            Members</p>
        <p><?php echo $description ?></p>
        <p class="text-muted">Presented by <a href="#"><?php echo $username ?></a></p>
        <button onclick="window.location.href='https://infs3202-c25wl.uqcloud.net/travnow/content.php?id=<?php echo $post_id ?>'" id="btnReadmore" type="submit" class="btn btn-primary">Read More</button>
    </div>
</div>
<hr>
<? } ?>

My page currently can load the first two articles, but then there is a problem when users scroll pass the #post-data div. It keeps showing "undefined" when i alert var last_id

if ($(this).scrollTop() >= $('#post-data').position().top) {
   var last_id = $('#post-data').children('.row').last().id;
   alert(last_id);
}

Inspect result:

enter image description here

I also tried:

var last_id = $(".row:last").attr("id");

but it does not work.

Any pointers?

Updated:

It is actually a syntax error, my silly! Thank @SuperUser for that!

Upvotes: 0

Views: 61

Answers (3)

Matthias Raes
Matthias Raes

Reputation: 75

How about using the CSS-selector for last child? 

var last_id = $('#post-data:last-child').prop('id');

I prefer the use of prop, haven't had any trouble with that so far, where attr has given me several problems in the past.

You might want to read up on this: .prop() vs .attr()

Upvotes: 0

Swapnil Patil
Swapnil Patil

Reputation: 942

try:

var last_id = $('#post-data:nth-last-child(1)').attr('id');

Upvotes: 0

Super User
Super User

Reputation: 9642

You have some syntax error in your jquery script , it should be

var last_id = $('#post-data').children('.row').last().attr('id');
alert(last_id);

or

var last_id = $('#post-data .row:last-child').attr('id');
alert(last_id);

Upvotes: 1

Related Questions