Заставка AJAX-заставка ожидания с помощью JQuery

Небольшой фокус при помощи jQuery, позволяющий вывести пользователю уведомление о том, что в фоне происходит некая работа и неплохо было бы дождаться ее окончания. Появление и скрытие уведомления будет организовываться JS-кодом.

Приступим:

• Скачайте последнюю сжатую версию jQuery (локальное зеркало: jquery-1.7.1.min.js) и добавьте в конец JS-файла такой код:

  jQuery.fn.center = function () {
      this.css("position", "absolute");
      this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
      this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
      return this;
  }
  

  Этот код дополняет jQuery новым методом, обеспечивающим центрирование элемента к которому он применяется.
  Загрузите jQuery в CRM в качестве JS Веб-ресурса;

• Скачайте иконку в стиле AJAX и загрузите ее в CRM в качестве GIF Веб-ресурса. Дайте ему имя ajax.gif;
• Создайте новый JS Веб-ресурс с именем AjaxLoader.js и таким содержимым:

  function AjaxLoader() {
      $('body').append('<div id="loadingDiv"></div>');
  
      $('#loadingDiv')
          .append('<p id="loadingText"></p>')
          .css('background', 'url(' + Xrm.Page.context.getServerUrl() + '/WebResources/new_ajax.gif) no-repeat 50% 25%')
          .css('padding-top', '90px')
          .css('background-color', '#F5F5F5')
          .css('border', '3px solid #00008B')
          .css('height', '160px')
          .css('width', '300px')
          .center()
          .hide(); // изначально скрываем сообщение
  
      $('#loadingText')
          .css('text-align', 'center')
          .css('font', '20px bolder')
          .css('font-family', 'Segoe UI, Tahoma, Arial');
  }
  

  Этот код создает DIV элемент с параграфом внутри и задает им определенные свойства. При этом вызываются два метода: один центрирует DIV элемент по центру экрана, а второй скрывает DIV при его создании (чтобы он «случайно» не отобразился при вызове функции AjaxLoader);

• Подключите JS Веб-ресурс AjaxLoader.js к нужной форме и вызовите на онлоаде функцию AjaxLoader;
• Далее Вам нужно использовать следующие скрипты для управления уведомлением:
• Задание текста сообщения

  $('#loadingText').text("Ждем чего-то...");
  

• Отображение сообщения

  $('#loadingDiv').show();
  

• Скрытие сообщения

  $('#loadingDiv').hide();