Hi everyone
I have the following code which tries to use the ajaxStart and ajaxStop functions and they dont work, any idea ???
index.html
style.cssCode:<html> <head> <title>in</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <div class="loader"> <img id="loaderImg" src="loading.gif" alt=""/> <button onclick="unBlockEverything()">Hide</button> </div> <button onclick="blockEverything()">Show</button> </body> <script src="update.js" type="text/javascript"></script> </html>
Code:.body{ position: relative; } .loader{ position: fixed; height: 100%; width: 100%; background-color: rgba(0,0,0,0.725); z-index: 1000; } #loaderImg{ position: fixed; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; }
update.js
Any help?Code:$(document).ready(function () { alert("hi"); $('.loader').hide(); $('.loader') .ajaxStart(function () { console.log("show1"); $(this).show(); }) .ajaxStop(function () { $(this).hide(); console.log("HIDE2"); }) ; }); function blockEverything(){ $('#loader').ajaxStart(); console.log("show"); } function unBlockEverything(){ $('#loader').ajaxStop(); console.log("hide"); }
Thank you in advance



Reply With Quote
