使用jQuery定位dom元素不起作用

Question

I am using a JS Promise to asynchronously get the user's location inside getLocation() . And then I'm making an Ajax request to the server inside postLocation() .

$('#add_location_btn').on('click', function () {
        if ($('#code').val().length === 0) {
            window.alert('Enter a valid code!');
        } else {
            getLocation().then(function (pos) {
                $('#addlocation_loader').attr('hidden', false);  // Show loading sign
                return pos;
            }).then(function (pos) {
                postLocation(pos);
            });
        }
        $('#addlocation_loader').attr('hidden', true);  // Hide loading sign
    });

However, eventually changing addlocation_loader 'hidden' attribute to true is not working, meaning that the attribute is properly set to false but never turns true.

Edit

It's worth noting that I want to hide the loading sign after postLocation() is executed.

I have tried setting 'hidden' to true in a third then() statement, but the sign now never shows up. It seems that the show and hide statements are quickly executed after one another, which is confusing (When I comment out the hide statement the sign is normally shown, which means that both execute).

getLocation().then(function (pos) {
    $('#addlocation_loader').attr('hidden', false);  // Show loading sign
    return pos;
}).then(function (pos) {
    postLocation(pos);
}).then(function () {
    $('#addlocation_loader').attr('hidden', true);  // Hide loading sign
});

Answer 1

If you want to hide the loader, you should do it within the .then() callback, because that is when the promise has been resolved. So what you want to do is:

1. Show loader before executing postLocation()
2. Remember to return the promise from postLocation() (which you didn't do in the code)
3. Hide the loader when the promise is resolved (after posting the position has succeeded)

Here is your fixed code:

// Perform async operation
getLocation().then(function (pos) {

    // Show loader
    $('#addlocation_loader').attr('hidden', false);

    // Post location. Remember to return the promise to chain it!
    return postLocation(pos);

}).then(function() {

    // Hide loader when position is successfully posted
    $('#addlocation_loader').attr('hidden', true);  

});

Answer 2

You are using an asynchronous function to the attribute to false. That means that probably

$('#addlocation_loader').attr('hidden', true);

is executed before

$('#addlocation_loader').attr('hidden', false);

Answer 3

You may have your hide/show loader backwards. Looks Like you set hidden to false when the location is returned and to true when the button is pressed.

Perhaps something like this would work:

$("#add_location_btn").on("click", function() {
  const $loader = $("#addlocation_loader");
  if ($("#code").val().length === 0) {
    window.alert("Enter a valid code!");
  } else {
    $loader.attr("hidden", false); // Show when requested
    getLocation()
      .then(function(pos) {
        $loader.attr("hidden", true); // Hide when returned
        postLocation(pos);
      });
  }
});