Jquery: Fadeout(), fadein() and Ajax calling do not work at the right time

Asked

Viewed 518 times

2

Hello. I have this code in Jquery:

$('#prods').fadeOut(300, function(event){
     chamaM(id_m);                            
});
$('#prods').fadeIn(300);

ChamaM() is an AJAX function that makes a call to PHP code, displaying the content within the div #prods. It’s all working, but what’s happening is that when the fadeout completes the previous content it stays there, like, the fadeout() and fadein() happen in the current content and only then it loads the new content. In the test environment (XAMPP) everything works perfectly, but in the site server this error happens. The address, so you can view is: www.lumiledbrasil.com.br/products.php

I have tried some variations of functions and order of them, but without success. Can anyone help me? I thought only this code was needed. If you need more information, just let me know. I really appreciate it all!

php jquery ajax fade
  • 1

    It flashes the product that was in focus before moving on to the clicked on, right? I guess it has nothing to do with that, I think the $('#prods').fadeIn(300); has to be part of the function right after AJAX or even inside AJAX itself as Return.

  • is what happens. If you notice, what it does is give fadeout(), and start fadein() on the content that was already in focus. Only then does it load the new content without fadein(). I believe it has something to do with the speed at which Ajax or Jquery evaluate the functions. But I can’t find the solution.

2 answers

2

Try it this way, I think it will work, you give the fadeOut(), removes html from inside the tag #Prods, and when the result is obtained by calling ajax, insert the result into the tag that is hidden and the fadein() to show it:

$('#prods').fadeOut(300, function(event){
    $(this).html("");
    chamaM(id_m);                            
});

function chamaM(id_chamado){
    $.ajax({
        type: 'POST',
        url: 'scriptPHP.php',
        data: 'id=' + id_chamado,
        success: function(data){
            if (data) {
                $('#prods').html(data).fadeIn(300);
            };
        }
    });
}

  • The idea of vcs works, the only problem is that for a moment, between loading the content, the page is left with no content, which makes the footer go up. But it’s already something, I’ll keep trying from this.

1


Just to complement the @helderburato answer, to solve your footer problem, since your <div id="prod-container" ... has a minimum height of 350px, you can put a div to embrace the same with this minimum height ... 

<div class="todooconteudo" style="min-height:350px">
     <div id="prod-container">
          // Seus produtos aqui
     </div>
</div>

So it will keep the footer where it has to be because the div that encapsulates the dynamic div content has a min-height, a css property.

Successoooooooooo ....

  • 1

    WAS! Vlw!! It was perfect

  • If you add that width:100%; overflow:hidden in the body element in the stylesheet estilo_lumiled.css, add the horizontal scroll bar that it’s not cute to stay there.

  • I think you should edit his answer and include these details. Your reply oor itself does not answer the question. I don’t even know why it was accepted.

Browser other questions tagged php jquery ajax fade

You are not signed in. Login or sign up in order to post.