Wild Goat Wild Goat - 6 months ago 10
HTML Question

Fade <div> element after submit button has been pressed

I have simple google maps div element. When user clicks

Submit
button expensive calculations trigged on backend therefore I want fade the whole google map in order to prevent user from navigating over and illustrate that job is in progress.

Simplified example: http://jsfiddle.net/8jhsxbpo/4/

<div id="map_canvas" ></div>
<button ng-click="getPlace()" type="button">Submit</button>


Note: Submit is not blocking the rest of the page. Doing it using angular
$http
service.

$scope.getPlace = function(term, locale) {
return $http.get('http://localhost:8080/search', {
params: {
term: term,
locale: locale
}
}).then(function(response){
renderMap(response);
});
};


My project is written on Bootstrap 3 + Angular Js.

Question: How did I fade or disable element and display loading icon while job is in progress?

Answer

Before making the request fadeout the map, display loading text, and after getting the response, hide loading text and fadein the map

$scope.getPlace = function(term, locale) {
    $("#map_canvas").fadeOut();
    document.getElementById("loading").style.display = "table";
    return $http.get('http://localhost:8080/search', {
        params: {
           term: term,
           locale: locale
        }
   }).then(function(response){
       $("#loading").hide();
       $("#map_canvas").fadeIn();
       renderMap(response);
   });
};

Add div and span element and set style.

 <div id="loading" class="loading-div">
     <span class="loading-span">Loading...</span>
 </div>
 <div id="map_canvas" ></div>

<style>
  .loading-div {
  display : none;
  width: 250px; //set width of map div
  height: 400px; //set height of map div
  text-align: center;
}

.loading-span {
  display: table-cell;
  vertical-align: middle;
}
</style>