problem with page complete in ajax

Asked

Viewed 110 times

1

I have a code that is working relatively well but has a small problem that I do not know how to solve...

On one page I have several combos that when clicking launch orders ajax and will complete other combos and simultaneously restrict a table with the new values. It seems quite complicated but even is not and is working well except when I launch an ajax request it has the famous image to inform that the request is ongoing and that it disappears when the data is returned.

Now with me this is not running well , because when I make the request that implies updating the combo and table (this request is what returns more data because it is when there is still a lot of information to filter) it updates the combo well but has a difference of updating the table that can be several seconds, the image disappears and 4 or 5 seconds after the table data update...

I’ll leave the part of the code where I put the requests and the ajax functions, to try to understand if this is where the problem comes from... if you need other codes to understand the rest of the process just ask.

 <script type="text/javascript" src="js/jquery-1.4.4.js"></script>
 <script type="text/javascript">

 /*first call----------*/
 $(document).ready(function () {  
 $(".drop").change(function () {        // ao clicar no combo mostra a div onde estao as          
  imagens de processamento enquanto a resposta não é page complete
 $(document).ajaxStart(function () {
 $("#wait").css("display", "block");
 });
 $(document).ajaxComplete(function () {
 $("#wait").css("display", "none");    // ao obter resposta de complete volta a esconder    
 a div que tem as imagens de processamento
 });
    var id = $(this).val();
    var dataString = empresa + id;    // establece agumas variaveis a passar no pedido  
  ajax
    $.ajax({
        type: "POST",
        url: "empresa.php",
        data: dataString,
        success: function (html) {

            $("#tab2").html(html);     // retorna o valor do processado na pagina do 
   pedido e substitui a div com esse valor
            $("#tab3").text(" ");      // insere texto em branco para "limpar" as outras 
    divs
            $("#tab4").text(" ");

            /*second call*/
            $.ajax({            // em simultaneo com o 1º pedido lança este 
    pedido a uma pagina diferente para retornar em uma div diferente 
                type: "POST",
                url: "lista.php",
                data: dataString,
                success: function (html) { 
                    $("#nomes").css("display", "block");
                    $("#nomes").html(html);

                }
            });
        }
      });
php ajax

  • Create a global counter of how many ajax are occurring. When performing an ajax, you increment this variable and in "complete:" you decrement and call the function to show the loading. In the loading function checks that the counter is greater than 0 and does not hide while the counter is not 0.

  • but should not function $(Document). ajaxComplete(Function() control all ajax requests since it is a global(if I am not saying any nonsense...)so I can repeat the code to every ajax request I make...but this also does not help, because it seems to me that the page receives the code to complete, although the table is not yet fully generated...

  • Yes, but if there is any gap between a complete ajax and another start this ajaxComplete will be called before the time. In any case leave a break point in this function and see what is the inappropriate time it is being called.

  • any chance to help me with this code for breackpoint ? I’m very green in these things? Thanks

  • user, line of action complementary to that suggested by Roger, I would encourage you to create a fiddle emulating the problem. You can emulate false ajax responses (with delay) using the API of echo. To have a sense of the delay of your current services use the tab Network chrome (Ctrl+Shift+I) or similar. Read more about the Chrome debuger at https://developers.google.com/chrome-developer-tools/docs/javascript-debugging.

1 answer

1

Well I don’t have much knowledge but I was able to understand a little what was causing the problem with the tip of Chrome(network), because the first call was quite fast and really had to generate the complete..., so there is the solution that resulted in full in my case ...

I removed the global ajax complete....

     $(".drop").change(function () {
     $("#wait").css("display", "block");  // fica fixo aqui o aparecimento da div

and put in the last request the hide of the div...

   $("#nomes").css("display", "block");
    $("#nomes").html(html);
                $("#wait").css("display", "none");

and ready whenever you are asking something the image is on the screen and so the data is returned back to hide , may not be very perfect , at the level of programming language , but solved my problem perfectly!

Browser other questions tagged php ajax

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