Showing Loading Image in Modal Popup Extender in Webservice ajax call

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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();?

Method 2

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

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0