Show Spinner When Teble Row Click

I have an a table. When i clicked the table rows , after that ajax request functions are called and then more than one tables load. I want to show spinner while ajax methods run.

Solution 1:

Just call required ajax functions in your row click function

$(".table-row").click(function (evt) {
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});

Then define the functions as below. In the beginning show the loader and on success or error hide the loader.

function CallAjaxMethodForTable1(){
$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

Solution 2:

I hope it's work

$(".table-row").click(function (evt) {
$('.loaderImage').show();
   var $cell = $(evt.target).closest('td'), msg;
   var id = $cell.attr("id");
   CallAjaxMethodForTable1(id);
   CallAjaxMethodForTable2(id);
   CallAjaxMethodForTable3(id);
   CallAjaxMethodForTable4(id);
});



function CallAjaxMethodForTable4(){
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },                        
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}

and also mention this code in every method

 error: function (response) {
               $(".loaderImage").hide();

           }   

Solution 3:

One good way to do this is via jQuery's global ajax event handlers .ajaxStart() and .ajaxStop().

.ajaxStart() - Register a handler to be called when the first Ajax request begins.

.ajaxStop() - Register a handler to be called when all Ajax requests have completed.

So in your case, you can show spinner on .ajaxStart() and hide it on .ajaxStop() and don't have to worry about showing/hiding it on table click. This will be globally handled and will work for other requests too which is a good practice when loading data asynchronously.

Check the snippet for a working demo:

$(document).ready(function() {
  //when ajax request is started
  $(document).ajaxStart(function(event, jqXHR) {
    $(".loader").show();
  });

  //when all ajax requests are completed
  $(document).ajaxStop(function(event, jqXHR) {
    $(".loader").hide();
  });

  $("#makeRequest").on("click", function() {
    $.ajax({
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/comments"
    });
  });
});

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader {
  display: none;
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #0dc5c1;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0px 5.1em;
  transform-origin: 0px 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="makeRequest">Make a request</button>
<div class="loader">Loading...</div>

Solution 4:

$('.loaderImage').show();
$.ajax({
        type: "POST",
        url: "/some_url",
        data: { id: id },  
        beforeSend: function () {
                    $(".loaderImage").show();
                },                      
        success: function(data){                
            $('.loaderImage').hide();
        },
        error: function (response) {
           $(".loaderImage").hide();

       }           
    });
}```