Stop A Web Page From Loading Until A JQuery AJAX Call Completes?

Question

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";
     }
 }

});

IMHO, I feel you should avoid blocking the UI at all costs. "Waiting" for something to load can really ruin a site and a person's feelings towards said site. — Dom
– Dom, Commented Aug 14, 2013 at 21:23
Out of curiosity: If a user disables Javascript, can they access the content without logging in? — Pete Scott
– Pete Scott, Commented Aug 14, 2013 at 21:23
Nope. We have full server side authentication. This is about them using their back button to see cached content. I can't turn caching off server side because we have legacy multi-screen forms, each screen having data, which should not be seen after logging out. Setting no cache on those screens results in the user back buttoning to a blank screen and having no screen to go forward to.....sitting dead. — Steve
– Steve, Commented Aug 14, 2013 at 21:25
Like @Jean-Philippe Bond said below, why use Async (ajax) calls then? You are better off making the call synchronously and wait for the response to determine your next action. — blurfus
– blurfus, Commented Aug 14, 2013 at 21:37

bizzehdee · Accepted Answer · 2013-08-15 14:44:07Z

8

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
  });

edited Aug 15, 2013 at 14:44

bizzehdee

21.2k13 gold badges49 silver badges79 bronze badges

answered Aug 14, 2013 at 21:25

Jean-Philippe Bond

10.9k4 gold badges37 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jean-Philippe Bond Over a year ago

Why ajaxSetup? ajaxSetup is used to set default values for future Ajax requests...

blurfus Over a year ago

ajaxSetup would affect all future ajax calls (by setting up defaults) while @Jean-Philippe's version only sets up async: false on the one call. Depending on which one you want both answers could work.

Steve Over a year ago

I edited your answer to include the option "cache: false". In Firefox and Chrome cached copies of the page had the variable "data" cached which was giving a leftover, wrong, answer of "confirmed". The "cache: false" option forced the browser/AJAX code to get a fresh answer. Thanks much for the answer, huge help!

Benoit Over a year ago

This will block the UI, there is no better solution?

user2080225 Over a year ago

Another approach is also to set your main page content to "display:none" until an ajax request completes, and then set to "display:inline" (or whatever visible style), and that way you don't need the ajax to be synchronous. To end user would look the same unless you have a "loading..." indicator visible.

Collectives™ on Stack Overflow

Stop A Web Page From Loading Until A JQuery AJAX Call Completes?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related