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

redsunset

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!

colin

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

redsunset

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

redsunset

my solution does not seem to work here ...

kthorngren

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

redsunset

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

kthorngren

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

redsunset

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!

redsunset

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!