jQuery $.post return incomplete data

Viewed 135

I've come across a strange behavior of a $.post command. I have an AJAX request by $.post(param,returned data), which loads pictures onto the page of the visitor.

This is the code, with a little bit of animation:

function showPicturesByCat(cat){
$('.local-overlay').fadeIn(200);
$('#picturesByCat').stop().animate({height: '0px' },200);
setTimeout(function(){
    $.post('./ajax/populate.php',{operation:'show-pictures-on-front',cat:cat})
        .done(function(data){
            $('#picturesByCat').html(data);
            setTimeout(function(){
                var inaltime = $('#picturesByCat')[0].scrollHeight+20;
                $('#picturesByCat').stop().animate({height: inaltime+'px' },500);
                $('#picturesByCat').css({opacity: 1});
                $('.local-overlay').delay(500).fadeOut(300);
            },300);
            $('html, body').delay(200).stop().animate({
                scrollTop: $('#picturesByCat').offset().top
            },300);
        });
},200);
}

On the PHP side, it's just a loading of pictures with names inside a database, based on the chosen category (cat). Code works perfectly ... on PC,s, but when it turns to mobile, both Chrome and Firefox do the same wierd thing. When I choose a category, the pictures loads but not completely. If you scroll to the bottom, you'll see the thing. If I tap the second time on the same category, the pictures loads completely.

Here's the address

http://adrianmalancaphotography.com/en/fotografie

I can't figure this out, it's too wierd for me. Maybe some of you can spot or already know what it's wrong.

Edited:

this is the dump data, as requested in comments.

<hr class="hr-white">
Peisaj
<hr class="hr-white">
<div class="col-12">
    <div class="card-columns">
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Maci 2</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-22.jpg" class="img-fluid" width="100%" alt="fotografie Maci 2" onClick="showImage(22)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Grau</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-17.jpg" class="img-fluid" width="100%" alt="fotografie Grau" onClick="showImage(17)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apa incetosata</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-15.jpg" class="img-fluid" width="100%" alt="fotografie Apa incetosata" onClick="showImage(15)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apus intunecat</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-14.jpg" class="img-fluid" width="100%" alt="fotografie Apus intunecat" onClick="showImage(14)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Nori cenusii</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/preview/AMP-IMG-13.jpg" class="img-fluid" width="100%" alt="fotografie Nori cenusii" onClick="showImage(13)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>La tara</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-12.jpg" class="img-fluid" width="100%" alt="fotografie La tara" onClick="showImage(12)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Ponton</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-10.jpg" class="img-fluid" width="100%" alt="fotografie Ponton" onClick="showImage(10)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Lebede</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-9.jpg" class="img-fluid" width="100%" alt="fotografie Lebede" onClick="showImage(9)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Apus pe apa</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-8.jpg" class="img-fluid" width="100%" alt="fotografie Apus pe apa" onClick="showImage(8)"> </div>
        <div class="card card-block p-0 foto-card my-2">
            <div class="img-over-info"> <span>Camp cu maci</span> <span class="pull-right action-icons"> <i class="fa fa-shopping-cart"></i> <i class="fa fa-eye"></i> </span> </div>
            <img src="./images/small/AMP-IMG-4.jpg" class="img-fluid" width="100%" alt="fotografie Camp cu maci" onClick="showImage(4)"> </div>
    </div>
</div>

Hope it helps, although I can't see anything wrong.

1 Answers
Related