jQuery $.post return incomplete data

Question

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.


Peisaj


    
        
             Maci 2     
             
        
             Grau     
             
        
             Apa incetosata     
             
        
             Apus intunecat     
             
        
             Nori cenusii     
             
        
             La tara     
             
        
             Ponton     
             
        
             Lebede     
             
        
             Apus pe apa     
             
        
             Camp cu maci

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

Duc Filan · Accepted Answer

The problem does not come from $.post. The problem is caused by:

var inaltime = $('#picturesByCat')[0].scrollHeight+20;
$('#picturesByCat').stop().animate({height: inaltime+'px' },500);

REASON:

Since the height is not properly calculated because, when your images start loading, its height is not calculated right, then your #picturesByCat is limited to your wrong calculated value, so it is not fully displayed, but the images are loaded correctly.

The second time you clicked on the category, those images are fully displayed and have right height, then the problem is gone.

RESOLUTION:

Set the height back to auto when your animation is finished:

$('#picturesByCat').stop().animate({height: inaltime+'px' },500, function(){
    $('#picturesByCat').css('height', 'auto');
});

jQuery $.post return incomplete data

Answers (1)

Related Questions