Элемент <div> исчезает после нажатия кнопки отправки

Question

Элемент <div> исчезает после нажатия кнопки отправки

0

У меня есть простой элемент div div. Когда пользователь нажимает кнопку " Submit, дорогостоящие вычисления запускаются на бэкэнд, поэтому я хочу угаснуть всю карту Google, чтобы пользователь не переходил и не показывал, что эта работа выполняется.

Упрощенный пример: http://jsfiddle.net/8jhsxbpo/4/

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

Примечание. Отправить не блокирует остальную часть страницы. Выполнение этого с использованием углового сервиса $http.

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

Мой проект написан на Bootstrap 3 + Angular Js.

Вопрос. Как я могу убрать или отключить элемент и отобразить значок загрузки во время выполнения задания?

Wild Goat 14 май 2016, в 16:52

Источник

0

Это обычно делается либо с div, охватывающим все окно, и с загрузкой сообщения или gif, так как для кнопки вы всегда можете установить ее свойство отключенным.
Neta Meta 14 май 2016, в 14:44
0

@KarthikMR, спасибо за ответ. Отправить не блокирует остальную часть страницы. Делаем это, используя угловой сервис $ http.
Wild Goat 14 май 2016, в 15:02
0

вы отправляете через ajax call? Если это так, пожалуйста, отправьте код.
Karthik M R 14 май 2016, в 15:03
0

@KarthikMR, я использую angular $http не уверенный, какая технология ниже этого, но предполагаю, что он очень похож на ajax, так как он не блокирует страницу. docs.angularjs.org/api/ng/service/$http
Wild Goat 14 май 2016, в 15:13
0

опубликуйте свой код отправки
Karthik M R 14 май 2016, в 15:31
0

@KarthikMR, спасибо. Обновлено.
Wild Goat 14 май 2016, в 15:58

Показать ещё 4 комментария

Теги:

javascript

jquery

html

angularjs

css

2 ответа

0

Что-то вроде этого:

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

var showLoader = function () {

    $("#map_canvas").hide();
    var loader = '<img id="loaderImage" src="/Content/Images/Loaders/loading4.gif" style="width:150px;height:150px;" />';

    $("#loading").addClass("text-center");
    $("#loading").append(loader);
};

var hideLoader = function () {

    $("#map_canvas").show();
    $("#loading" + " img:last-child").remove();
    $("#loading").removeClass("text-center");

};

Denys Wessels 14 май 2016, в 14:14

Ещё вопросы

Это обычно делается либо с div, охватывающим все окно, и с загрузкой сообщения или gif, так как для кнопки вы всегда можете установить ее свойство отключенным.
@KarthikMR, спасибо за ответ. Отправить не блокирует остальную часть страницы. Делаем это, используя угловой сервис $ http.
вы отправляете через ajax call? Если это так, пожалуйста, отправьте код.
@KarthikMR, я использую angular $http не уверенный, какая технология ниже этого, но предполагаю, что он очень похож на ajax, так как он не блокирует страницу. docs.angularjs.org/api/ng/service/$http

Karthik M R · Accepted Answer · 2016-05-14T14-43-00.000Z

Перед тем как сделать запрос затухать на карте, отобразить загружаемый текст и после получения ответа скрыть текст и пометить карту

$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);
   });
};

Добавьте элемент div и span и установите стиль.

 <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>

Спасибо! Как добавить загрузочный div, чтобы он был в середине моего элемента map и не был перегружен?
установить высоту и ширину загрузочного div, который является значением карты.