jQuery: Wait for AJAX content to load before rendering webpage

500 views Asked by At

I have a webpage showing a list of items that's divided into several pages. The list is contained inside a <div> whose contents are replaced via AJAX whenever the user clicks on a link representing the chosen page. In order to prevent the list from showing up empty before an initial AJAX call inside $(document).ready() has had a chance to complete, I load the first page into the <div> server-side instead and only use AJAX for subsequent updates.

I've started using jQuery BBQ to allow for users to bookmark any page they want to, but using it inside $(document).ready() to read the bookmarked page number and replace the <div>'s default contents with the bookmarked page's contents causes the list to visibly switch between the default and bookmarked pages. What I'd like is for the bookmarked page to come up immediately as if I had loaded it by default, without visibly switching between pages and without the list showing up empty before the first AJAX call has completed.

Standard advice is to place all content inside a hidden <div> which is then made visible once all the content on the page has finished loading. This works OK, but what I really want is for the contents not to be rendered at all (hidden or otherwise) until the bookmarked page's contents have finished loading. This means that when clicking on a link from any webpage on my website to the particular webpage containing the list, the first webpage should remain on the screen until the webpage containing the list has finished loading.

Is there any way to do this at all?

0

There are 0 answers