Need to click twice before jquery animate is fired-CodePudding

I have some code where I load data from a php query through jquery. I want to make it load the data and animate the div open to height auto.

My code works, but I always have to click twice after the page has been loaded in order to make it animate. I think this issue is because on the first click, there is no page load yet so even if it animates to auto height, there is nothing to animate to.

I have been trying to solve this but I cannot seem to work out a solution, so I am asking for a bit of help on this. I do need the load function to happen on the click event. Because it passes through variables I use in my php query.

Here is the JQuery code that I have used:

$(document).ready(function(){
$(".orderBlok").click(function(){
    var order = $(this).find('.orderBlokNummer').text();
    var dat = $('#datumSelector').val();
    $('#orderSelector').val(order);
    $("#"   order).load("bonselect.php", {
        dezeOrder: order,
        datumVandaag: dat
    });

var open = $(this).find('.orderBlokBonGedeelte'),
        animateTime = 500;
    if(open.height() == 0){
        autoHeightAnimate(open, animateTime);
    } else {
      open.stop().animate({ height: '0' }, animateTime);
    }
});

function autoHeightAnimate(element, time){
    var curHeight = element.height(), // Get Default Height
        autoHeight = element.css('height', 'auto').height(); // Get Auto Height
          element.height(curHeight); // Reset to Default Height
          element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
}

});

Any help would be appreciated!

CodePudding user response：

The issue seems to be, that you didn't perform the actions for animation after the request have been loaded.

The request is async, so maybe at the point that executes the animation have the luck that is loaded, or may not. That's why at the second click, is surely loaded.

Try something like this

$(document).ready(function(){
            $(".orderBlok").click(function(){
                var order = $(this).find('.orderBlokNummer').text();
                var dat = $('#datumSelector').val();
                var clicked_element = $(this);
                $('#orderSelector').val(order);
                $("#"   order).load("bonselect.php", {
                    dezeOrder: order,
                    datumVandaag: dat
                }, function() {
                
                            openAnimation(clicked_element);
                
                });
                });  
          });
    
    
    function openAnimation(clicked_element) {
                        var open = clicked_element.find('.orderBlokBonGedeelte'),
                                    animateTime = 500;
                                if(open.height() == 0){
                                    autoHeightAnimate(open, animateTime);
                                } else {
                                  open.stop().animate({ height: '0' }, animateTime);
                                }
                });
                }
    
    function autoHeightAnimate(element, time){
        var curHeight = element.height(), // Get Default Height
            autoHeight = element.css('height', 'auto').height(); // Get Auto Height
              element.height(curHeight); // Reset to Default Height
              element.stop().animate({ height: autoHeight }, time); // Animate to Auto Height
    }