I would like to show "please wait, loading" spinning circle during process SOAP call. I have a problem with show modal screen in Google Chrome and Internet Explorer 9,10,11. Firefox is OK.
If i remove $("body").removeClass("loading"); from someMethodSOAP(), loading screen show correct in Google Chrome and IE.
Duration of SOAP call is one second, so loading screen should be show.
I want to show loading screen in Google Chrome and IE, but i do not know how to do it? And why Firefox browser working correct and Google Chrome and IE not?
I use:
[jQuery 2.1.1][ http://code.jquery.com/jquery-2.1.1.js ]
[jquery.soap 1.3.8][ http://plugins.jquery.com/soap/ ]
[modal window solution from:[ How can I create a "Please Wait, Loading..." animation using jQuery? ]
Thank you.
my code:
index.php:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
div.modal div {
position: absolute;
top:50%;
left:50%;
width: 20%;
height: 10%;
margin:-5% 0 0 -10%;
text-align: center;
}
</style>
<script charset="UTF-8" src="jquery-2.1.0.min.js"></script>
<script charset="UTF-8" src="jquery.soap.js"></script>
<script>
var WEB_SERVICE_URL = 'path to SOAP';
function someMethodSOAP(id) {
var xml;
$.soap({
url: WEB_SERVICE_URL,
method: "testMethod",
appendMethodToURL:false,
async: false,
data: {
ID: id,
},
beforeSend: function (SOAPEnvelope) {
$("body").addClass("loading"); //loading turn on
},
success: function (soapResponse) { //OK
xml = soapResponse.toString();
},
error: function (SOAPResponse) { //FAULT:
xml = SOAPResponse.toString();
}
});
$("body").removeClass("loading"); //loading turn off
return xml;
}
$(window).load(function() {
/*$("body").addClass("loading");
$("body").removeClass("loading");*/
someMetodSOAP(1);
});
</script>
</head>
<body>
<div class="modal"> <!-- loading-->
<div>
<img src="https://i.stack.imgur.com/FhHRx.gif'">
</div>
</div>
</body>
</html>
EDIT:
I try this code (below), but still not working.
Behavior: Method test_loading CALL method on server, which during 5 seconds. This code waiting (async:false) 5 seconds and after web browser show loading. I do not understand it. Loading is show after someMetodSOAP(5); is completed, but I want to show loading before someMetodSOAP(5);.
<script>
$(window).load(function() {
$("body").addClass("loading");
someMetodSOAP(5);
//$("body").removeClass("loading");
});
var WEB_SERVICE_URL = '../soap_nu.php';
function someMetodSOAP(second) {
var xml;
$.soap({
url: WEB_SERVICE_URL,
method: "test_loading",
appendMethodToURL:false,
async: false,
data: {
parametr: second
},
beforeSend: function (SOAPEnvelope) {
},
success: function (soapResponse) {
xml = soapResponse.toString();
},
error: function (SOAPResponse) {
xml = SOAPResponse.toString();
}
});
return xml;
}
</script>
SOLVED: I found deffered-object from: api.jquery.com/category/deferred-object/ (I do not have reputation for this link, sorry.). It help me. I hope that help you:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
.block {display: block !important}
#loading {
display: none;
/*etc. for example css spinner*/
}
</style>
<script charset="UTF-8" src="jquery.min.js"></script>
<script charset="UTF-8" src="jquery.soap.js"></script>
<script>
var WEB_SERVICE_URL = 'path to SOAP';
function someMethodSOAP(id){
var d = $.Deferred();
$.soap({
url: WEB_SERVICE_URL,
method: "testMethod",
appendMethodToURL:false,
async: true,
data: {
ID: id,
},
success: function (soapResponse) { //SOAP OK
try {
d.resolve(soapResponse.toString());
} catch(e){
d.reject(SOAP_THROW);
}
},
error: function (soapResponse) { //SOAP FAULT:
try {
d.reject(soapResponse.toString());
} catch(e){
d.reject(SOAP_THROW);
}
}
});
return d.promise();
}
$(window).load(function() {
//create some promises
var promises = new Array();
promises.push(someMethodSOAP(1)); //only one promise
$("#loading").addClass("block"); //start loading
$.when.apply($, promises).done(function(xml){ //Resolve
$("#loading").removeClass("block"); //finish loading
/*PASS*/
}).fail(function(xml){ //Reject
$("#loading").removeClass("block"); //finish loading
/*FAIL*/
});
});
</script>
</head>
<body>
<div id="loading"> <!--loading-->
<div><!-- css spinner --></div>
</div>
</body>
</html>
