Wait until the table is completly loaded -> Than hide the loading div

Wait until the table is completly loaded -> Than hide the loading div

redsunsetredsunset Posts: 44Questions: 15Answers: 0

Hi!

I show up a loading message (show_loading_message();) before I perform an ajax action. After the ajax was successfully done I reload the datatable.

than I am hiding the loading message (hide_loading_message();). The Problem is that I am hiding it too early. How could I wait hiding the loading messsage until the datatable is completly loaded?

    show_loading_message();   

                $.ajax({
                    url:          'data.php?job=mass_cond',
                    type:         'POST' , 
                    data:         {
                        id : res.val() , conditionselected : conditionselected2,
                    } , 
                    success : function(response){
                      console.log(response);
                      var res = $.parseJSON(response);
                      if (res.result) {
                        table_xyz.ajax.reload(function(){

                        } , false);
                      show_message('success.', 'success');
                      }
                      else{

                      }
                      hide_loading_message();

how could I fix this? thank you in advance!

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @redsunset ,

    One place you could call the hide function is in the xhr, that way you know the Ajax load has completed.

    Cheers,

    Colin

  • redsunsetredsunset Posts: 44Questions: 15Answers: 0
    edited December 2018

    thank you colin for your reply

    so the code above is inside of an on click event:

    $(document).on('click','#mass_cond', function(e){
    
    CODE ABOVE
    
    });
    

    so I would just add

    $(document).on('xhr.dt', 'click','#mass_cond', function(e){
    
        CODE ABOVE
    
    });
    

    or is that the wrong change? thank you for your answer in advance

  • redsunsetredsunset Posts: 44Questions: 15Answers: 0
    edited December 2018

    my solution does not seem to work here :( ...

  • kthorngrenkthorngren Posts: 21,345Questions: 26Answers: 4,954
    Answer ✓

    Here is an example of what Colin suggested:
    http://live.datatables.net/kasikika/1/edit

    After the ajax.reload() is complete the xhr event will execute and clear the "loading" text.

    Kevin

  • redsunsetredsunset Posts: 44Questions: 15Answers: 0
    edited December 2018

    Hello kthorngren

    thank you very much for this great example! Within the ajax success, and directly after the table reload I am using this:

        $('#mytable').on('xhr.dt', function ( e, settings, json, xhr ) {
        hide_loading_message();
        show_message('successfully deleted.', 'success');
        });
    

    It works great, but it seems to remember the executions ... so if I do the on click event twice, it executes hide_loading_message(); and show_message() twice ... If I than run the on click event a third time, it would run hide_loading_message(); and show_message() three times in a row ... and so on ...

    How could I avoid this effect?
    Thank you in advance!

    beste greetings

  • kthorngrenkthorngren Posts: 21,345Questions: 26Answers: 4,954
    Answer ✓

    You will want to move the event handler outside of the success function. You are adding an event each time which is why it is running multiple times.

    Kevin

  • redsunsetredsunset Posts: 44Questions: 15Answers: 0

    Hi Kevin!
    Thank you very much! That is solving the problem if I place the code outside of the entire on click event.
    The problem is how do I fire a specific show_message event with a specific message for each on click event when this is placed outside and only once.
    thank you very much for your answer.

    best greetings!

  • redsunsetredsunset Posts: 44Questions: 15Answers: 0
    edited December 2018

    I think I got a solution just for those that maybe have the same problem ... I just saved the current id from the click event and added a if(currentOnClickEvent ="xyz") {show_message();} inside the xhr.dt event ... and that is working great!

This discussion has been closed.