Showing Loading Image in Modal Popup Extender in Webservice ajax call

Question

I use .ajax to call a webservice mehod that sends an email to entered email.

I want to to show an ajax modal popup extender containg an image saying 'sendig...'

i used .ajax to call my webservice like:

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

the problem is that my SendMPE is not showing.

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

is this this problem caused by the image or what?

Who has an idea or has already done somthin like that:loading image in a popoup.

Answer 1

Maybe you should remove 'style="display:none;' from SendingDiv. ModalPopupExtender will hide this div on startup.

Answer 2

First of all you should use

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

or better

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

instead of

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

see this answer for details.

One more remark. The event beforeSend(jqXHR, settings) should be use to modify jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent (see jQuery.ajax documantation). In your case you can just place $("#SendMPE").show(); before the $.ajax call.

Moreover probably you want use $("#SendingDiv").show();?

Answer 3

This may not be exactly what you have in mind, but I typically follow the following general pattern. I have the request as a generic function (unimportant for your purpose), but have methods of callbacks handle process/error with the handler itself being instantiated being responsible for showing the modal.

AJAX Call:

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

AJAX function:

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

}

Handler:

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