当 JQUERY ajax async 仅在 IE 中设置为 false 时，覆盖不显示

Question

An input button invokes javascript on the click event.

<input id="ToolbarStatusSubmitHtmlInputButton" type="button" value="Submit" runat="server"  visible="True" enableviewstate="true" onclick="callfunction()"/>

The onclick 'callfunction' is as follow

callfunction: function() {
        showparentOverlay();
        $.ajax({
            url: url,
            type: "GET",
            async: false,.....

 showparentOverlay: function() {
        $("#parentOverlay").removeClass('hideOverlay').addClass('showOverlay');
    },

The Callfunction does 2 things

1) Changes to the DOM element by removing and adding class

2) Makes an Ajax Call It is purposefully made async false, to retrive the value from service and get confirmation from user.

The issue is only in IE browser where showparentOverlay(transparent div) does'nt show until the ajax service call is completed.

However if the AJAX async is SET true the overlay displays.

Can anyone please help me with this issue, where I could display the transparent overlay while the connection to service is made and the async for the service is set - false.

Thanks

Answer 1

Try this:

 function oninputclick() { document.getElementById("window").style.width = "100%"; $.ajax({ async: false, type: 'POST', dataType: 'html', success: function (result) { // success do something }, complete: function () { // enable this when posting to server //setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000); } }); //for test only. use this inside the complete function. setTimeout(function () { document.getElementById("window").style.width = "0%"; }, 3000); }

 .overlay { height: 100%; width: 0; position: fixed; z-index: 9999999; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; }.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }.overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #f1f1f1; display: block; transition: 0.3s; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="window" class="overlay"> <div class="overlay-content"> <a href="javascript:void(0)" id="msgText">Loading...</a> </div> </div> <input type="button" value="Submit" runat="server" visible="True" onclick="oninputclick();"/>

Answer 2

I would suggest setting the async option to true and using the success function to load the overlay...

$.ajax({
   url: url,
   type: 'GET',
   success: function(data){
      //Show Overlay here
   }
});

This will call the service and upon success will then open your overlay.