Stop A Web Page From Loading Until A JQuery AJAX Call Completes?
I have requirements for a legacy site where I can't redesign the screens, I can't use header no-cache tags and I have to prevent the user from seeing cached screens after they logged out and pressed their back button.
I am almost to a solution ( see the code bit below )
When the page loads, I use a JQuery AJAX function to call the web app and see if the user is still logged in. If not, the user gets redirected to the login screen
<html>
<head>
<!-- all the usual header stuff, plus links to the jQuery libaries, first script tag on page below -->
<script language = "javascript">
$.get("/acme/confirm_authentication",function(data){
if( data != "confirmed"){
location.href = "logout";
}
});
</script>
</head>
<body>
blah blah blah
</body>
</html>
The big thing I don't like about this workaround is that for a split second I can the content before the JQuery function completes.
Is there a way I can keep the page from loading/rendering until the JQuery AJAX function comes to a stop?
Thanks
Update: Answer:
I modified the accepted answer below to include a "cache: false" option. In Firefox and Chrome, cached copies of the page that were reached via the back button would run the .ajax(), but would use a cached copy of the variable "data", which would give me an out of date answer.
$.ajax({
url: "/acme/confirm_authentication",
async:false,
cache: false,
success: function(data) {
if( data != "confirmed"){
location.href = "logout";
}
}
});
Answer
You can do it with the ajax function with the async property set to false.
$.ajax({
url: "/acme/confirm_authentication",
success: function(data) {
if( data != "confirmed"){
location.href = "logout";
}
},
async:false
});