Показ загрузки изображения в модальном всплывающем экстендере в веб-сервисе ajax call

Question

Я использую .ajax для вызова метода веб-сервиса, который отправляет электронное письмо на введенный электронный адрес.

Я хочу показать модальный расширитель всплывающих окон ajax с изображением «sendig ...»

Я использовал .ajax для вызова моего веб-сервиса, как:

var SendingModal = $find('SendMPE');
    var Resend = -1;
    $.ajax({
             async: false,
             type: "POST",
             url: "FinKaynWebService.asmx/SendEmail",
             data: "{'Email': '" + Email + "'}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             beforeSend: function() {
                 $("#SendMPE").show();
             },
             success: function(response) {
                 Resend = response.d;
                 SendingModal.hide();
              },
              failure: function(msg) {
                 alert('Sending Email failed,try later');
              }
    });

проблема в том, что мой SendMPE не отображается.

<div id="SendingDiv" style="display:none;background-color:Yellow;color:Blue;">
     <img id="LoadingImage" alt="Still sending"  src="./Images/Sending.gif" />
    <span style="margin-left:10px;">Sending...</span>
    <asp:Button ID="CloseButton" runat="server" style="display:none;" />
</div>
<asp:ModalPopupExtender ID="SendMPE" X="200" Y="200" runat="server" 
                    TargetControlID="SendHiddenButton" PopupControlID="SendingDiv" 
           CancelControlID="CloseButton"></asp:ModalPopupExtender>

эта проблема вызвана изображением или чем?

Кто имеет идею или уже сделал что-то подобное: загрузка изображения в всплывающем окне.

Answer 1

Прежде всего вы должны использовать

data: '{"Email": "' + Email + '"}'

или лучше

data: JSON.stringify({Email: Email})

вместо

data: "{'Email': '" + Email + "'}"

см. этот ответ для деталей.

Еще одно замечание. Событие beforeSend(jqXHR, settings) следует использовать для изменения объекта jqXHR (в jQuery 1.4.x, XMLHTTPRequest) перед его отправкой (см. Документацию jQuery.ajax ). В вашем случае вы можете просто поставить $("#SendMPE").show(); перед вызовом $.ajax.

Более того, вероятно, вы хотите использовать $("#SendingDiv").show();?

Answer 2

Возможно, это не совсем то, что вы имеете в виду, но я обычно придерживаюсь следующей общей схемы. У меня есть запрос как универсальная функция (не важная для вашей цели), но у меня есть методы обратного вызова, обрабатывающие процесс / ошибку, при этом сам экземпляр обработчика отвечает за показ мод.

AJAX Call:

var data = $.toJSON("{'obj:' + obj + "}");
var URI = "/FinKaynWebService.asmx/SendEmail";
var MSG = $("#modalDiv")
ajaxRequest(data, URI, new genericHandler(msg));

Функция AJAX:

function ajaxRequest(requestData, serviceURI, handler) {

  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: serviceURI,
    data: requestData,
    dataType: "json",
    cache: false,
    success: function(result) {
      callbackFunction.Process(result);
    },
    error: function(msg) {
      callbackFunction.OnError(msg.responseText)
    }
  });

}

Обработчик:

function genericHandler(msg) {
  $.blockUI(msg)
  this.Process = function(d) { alert("Data updated sucessfully.") };
  this.OnError = function(d) { alert(d.toString()) };
}

Answer 3

Может быть, вам следует удалить 'style = "display: none;' от SendingDiv. ModalPopupExtender будет скрывать этот div при запуске.