Question posted in
You can find the official documentation here.

Add a loading spinner on HTML until it receives the required data – Jquery ajax

My Node API returns a JSON object, the object is being displayed on HTML table. However, my Node app takes some time to process and return the data. So till the time data has being retrieved I want a spinner to load on the page.

$(document).ready(function() {
  $("#table1").hide();
  $("#myButton").click(function() {
    $("#myButton").hide();
    $("#table1").show();

    $.ajax({
      url: "http://localhost:8090/api/route1",
      type: 'POST',
      data: {
        data1: str1,
        data2: str2
      },
      dataType: 'json',
      success: function(res) {
        console.log(res);

        console.log("Result1", res.result1);
        console.log("Result2", res.result2);
        $('#td1').append(res.result1);
        $('#td2').append(res.result2);

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

<span class="spinner" id="loadingBtn">
  Loading...
</span>

<table class="table" id="table1">
  <tbody>
    <tr>
      <td id="td1"></td>
    </tr>
    <tr>
      <td id="td2"></td>
    </tr>
  </tbody>
</table>

How and where do I put the spinner id so that it is only displayed until the data is fully rendered onto the HTML table.

Tags:

4

Answers


  1. 0

    You can just add the loading spinner on loading and done. Show the spinner on call, and just hide it when the call is done. like so:

            $.ajax({
            type: 'POST',
            success: function(res){
                console.log(res);
            }
        }).done(function() {
            setTimeout(function(){
                $(".spinner").fadeOut(300);
            },500);
        });

    take a look at this codepen:
    https://codepen.io/yic666kr/pen/mxmvbV

    Login or Signup to reply.
  2. 0

    It depends on your structure where you have it placed but I’ll go with what you have put here. You have it visible when you start loading and hide it once data is loaded from your ajax.

    $(document).ready(function() {
  $("#table1").hide();
  $("#myButton").click(function() {
    $("#myButton").hide();
    $("#table1").show();

    // show the loader when you click the button
    $('#loadingBtn').addClass('spinner--is-active')

    $.ajax({
      url: "http://localhost:8090/api/route1",
      type: 'POST',
      data: {
        data1: str1,
        data2: str2
      },
      dataType: 'json',
      success: function(res) {
        console.log(res);

        console.log("Result1", res.result1);
        console.log("Result2", res.result2);
        $('#td1').append(res.result1);
        $('#td2').append(res.result2);
        
        // hide the loader
        $('#loadingBtn').removeClass('spinner--is-active')
      }
    });
  });
});
    .spinner {
  display: none;
}

.spinner--is-active {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="spinner" id="loadingBtn">
  Loading...
</span>

<table class="table" id="table1">
  <tbody>
    <tr>
      <td id="td1"></td>
    </tr>
    <tr>
      <td id="td2"></td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  3. 0

    Just show your spinner in beforeSend of ajax function and hide it after data is loaded under success function.

    $.ajax({
  url: "http://localhost:8090/api/route1",
  type: 'POST',
  data: {
    data1: str1,
    data2: str2
  },
  dataType: 'json',
  beforeSend: function() {
    $("#loadingBtn").show();//show spinner
  },
  success: function(res) {
    console.log(res);

    console.log("Result1", res.result1);
    console.log("Result2", res.result2);
    $('#td1').append(res.result1);
    $('#td2').append(res.result2);
    $("#loadingBtn").hide();//hide spinner
  }
});
    Login or Signup to reply.
  4. 0 
    $(document).ready(function() {
  $("#table1").hide();
  $("#myButton").click(function() {
    $("#myButton").hide();
    $("#table1").show();

    $.ajax({
      url: "https://www.mocky.io/v2/5ec78da22f0000640042721f",
      type: 'GET',
      dataType: 'json',
      success: function(res) {
        console.log(res);

        console.log("Result1", res.result1);
        console.log("Result2", res.result2);
        $('#td1').append(res.result1);
        $('#td2').append(res.result2);

      },
      beforeSend: function() {
         $("#loadingBtn").show();
      },
      complete: function() {
         $("#loadingBtn").hide();
      }
    });
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="spinner" id="loadingBtn" style="display:none;">
  Loading...
</span>
<button id="myButton">Press</button>
<table class="table" id="table1">
  <tbody>
    <tr>
      <td id="td1"></td>
    </tr>
    <tr>
      <td id="td2"></td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search