jquery - Show modal loading div is not running in Google Chrome and IE browsers, Firefox is ok -
i show "please wait, loading" spinning circle during process soap call. have problem show modal screen in google chrome , net explorer 9,10,11. firefox ok.
if remove $("body").removeclass("loading"); somemethodsoap(), loading screen show right in google chrome , ie.
duration of soap phone call 1 second, loading screen should show.
i want show loading screen in google chrome , ie, not know how it? , why firefox browser working right , google chrome , 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:[ jquery "please wait, loading..." animation? ]
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 body has loading class, turn scrollbar off overflow:hidden */ body.loading { overflow: hidden; } /* anytime body has loading class, our modal element 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 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 homecoming xml; } $(window).load(function() { /*$("body").addclass("loading"); $("body").removeclass("loading");*/ somemetodsoap(1); }); </script> </head> <body> <div class="modal"> <!-- loading--> <div> <img src="http://i.stack.imgur.com/fhhrx.gif'"> </div> </div> </body> </html> edit: seek code (below), still not working. behavior: method test_loading phone call method on server, during 5 seconds. code waiting (async:false) 5 seconds , after web browser show loading. not understand it. loading show after somemetodsoap(5); completed, want 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: sec }, beforesend: function (soapenvelope) { }, success: function (soapresponse) { xml = soapresponse.tostring(); }, error: function (soapresponse) { xml = soapresponse.tostring(); } }); homecoming xml; } </script> solved: found deffered-object from: api.jquery.com/category/deferred-object/ (i not have reputation link, sorry.). help me. hope 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. illustration 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 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 seek { d.resolve(soapresponse.tostring()); } catch(e){ d.reject(soap_throw); } }, error: function (soapresponse) { //soap fault: seek { d.reject(soapresponse.tostring()); } catch(e){ d.reject(soap_throw); } } }); homecoming d.promise(); } $(window).load(function() { //create promises var promises = new array(); promises.push(somemethodsoap(1)); //only 1 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>
you need remove async: false, work fine.
jquery ajax google-chrome soap
No comments:
Post a Comment