How to make jquery table which is refreshing itself in every 10 secs?

Question

I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there wi

Answer 1

Change your jQuery:

$(".data-contacts-js").append(

to

$(".data-contacts-js tbody").append( /*This nests properly in html*/

and before your

 $.each(

remember to remove all the children :)

$(".data-contacts-js tbody").empty();
$.each(

If you then want to use exactly the same code to run (on a refresh, not just a fetch) with an abort:

$(document).ready(function(){
  var getDataTimeoutId = null,
      refetchTime = 10 /* time in seconds */
      isFetching = false,
      getData = function(){
        if (isFetching) {return;}
        if (getDataTimeoutId !== null){
            window.clearTimeout(getDataTimeoutId);
            getDataTimeoutId = null;
        }

        isFetching = true;
        $.get(
          /* ajax get */
        ).success(function(){
            setDataTimeout(); /* Only auto re-get if there wasn't an error */
        }).always(function(){
            isFetching = false; /* always clear the status */
        });
      },
      setDataTimeout = function(){
        getDataTimeoutId = window.setTimeout(function(){
          getData();
        }, refetchTime * 1000);
      };

  $('#fetchContacts').click(function(){
    getData();
  );
  setDataTimeout();
});

This means that the code will run every 10s, or a click. But won't hammer the server for multiple pending requests.

:)