CODEWITHSUNDEEP
javascriptjquery
Alauddin Ahmed
Alauddin Ahmed

Reputation: 151

onclick not triggering all codes in jquery

I'm trying to show spinner and overlay before sending an ajax request. But The onclick event directly sending the ajax request without showing the overlay and spinner. Can anyone point me out what i'm doing wrong! here is my code

$(document).ready(function() {
    $(".refreshBtn").on('click', function() {
        $("#overlay").css('display', 'block');
        $(".spinner").css('display', 'block');

        TableDataContent();
    });

    function TableDataContent() {
        $(".all_tab_content").html('');

        var tableDiv = '<div id="Leaderboard" class="tabcontent"><table class="table-striped"><tbody></tbody></table></div>';

        $(".all_tab_content").append(tableDiv);
        var tableBody = $('#Leaderboard tbody');

        $.ajax({
            type: 'get',
            url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
            async: false,
            success: function(response) {

            }
        });

        $("#overlay").css('display', 'none');
        $(".spinner").css('display', 'none');
    }
});

Upvotes: 1

Views: 43

Answers (4)

Rory McCrossan
Rory McCrossan

Reputation: 337743

The problem is entirely due to your use of async: false. It's incredibly bad practice as it prevents the browser from being updated while the request is in progress. It's for this reason you never see the UI changes.

To fix this, remove async: false and instead work with the async callbacks of $.ajax(), like this:

$(function() {
  $(".refreshBtn").on('click', function() {
    TableDataContent();
  });

  function TableDataContent() {
    var $indicators = $("#overlay, .spinner").show(); // show the loading indicator when the request starts...

    var tableDiv = '<div id="Leaderboard" class="tabcontent"><table class="table-striped"><tbody></tbody></table></div>';
    $(".all_tab_content").empty().append(tableDiv);

    var $tableBody = $('#Leaderboard tbody');

    $.ajax({
      type: 'get',
      url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
      success: function(response) {
        // work with the response here...
      },
      complete: function() {
        $indicators.hide(); // hide the loading indicator when the request ends
      }
    });
  }
});

Note the use of empty(), show() and hide() here.

You also presume you need to change {SHEET_ID} and {API_KEY} in the URL to their actual values - presuming that's not just redacted data in the question.

Upvotes: 1

Kubwimana Adrien
Kubwimana Adrien

Reputation: 2531

You are hiding the spinner before ajax finishes put hide them from inside the complete callback so they can be hidden even when the ajax fails.

$.ajax({
type: 'get',
url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
async: false,
success: function(response) {

},
complete: function(xhr, textStatus){
    $("#overlay").css('display', 'none');
    $(".spinner").css('display', 'none');
}
});

Upvotes: 1

dporechny
dporechny

Reputation: 646

Right now you are hiding .spinner and #overlay without waiting for ajax to complete. Ajax's success callback happening when data is received, this is exactly the moment you want hiding .spinner and rest.

$.ajax({
    type: 'get',
    url: 'https://sheets.googleapis.com/v4/spreadsheets/{SHEET_ID}/values/Leaderboard?key={API_KEY}',
    async: false,
    success: function(response) {
        $("#overlay").css('display', 'none');
        $(".spinner").css('display', 'none');
        // rest of your business
    }
});

Upvotes: 1

K&#233;vin Bibollet
K&#233;vin Bibollet

Reputation: 3623

Your spinner does not show because AJAX requests are asynchronous. It means that it will be executed while the script continue to be executed too.

To correct that, move instructions which hide the overlay and the spinner in the success callback of your AJAX.

Upvotes: 1

Related Questions