I'm currently developing an application that includes a dashboard on its main page. In order to address any potential loading issues, the content of the dashboard is being calculated asynchronously using Ajax. This means that users do not have to wait for the dashboard to fully load before navigating to another page or checking out other indicators.
Here's how it's supposed to work:
- When the page loads, a javascript function triggered by onload() on the body makes an Ajax request to generate a canvas or skeleton for the dashboard with basic content for each component (like a loading gif and "Wait, loading content..." message), as well as hidden information such as refresh delays, wrapper div IDs, and component classes.
- This Ajax call has an onSuccess part that triggers another function. This function looks for the hidden information and, for each component found, calls a third function to refresh its content (initially replacing the default content).
- In summary, if my dashboard has 4 components, when I visit the page, an Ajax request creates a canvas, then scans the canvas to fire off 4 separate Ajax requests to calculate the content for each component.
Typically, since these calls are asynchronous, I can click on a link and go to another page without having to wait for all the calls to finish loading. The components also update quickly because each individual Ajax call is asynchronous. However, whenever I click on a link, it waits for all the calls to finish processing before moving to the new page, sometimes causing a delay in loading time. Additionally, the "refresh" calls are handled sequentially rather than concurrently.
How can I achieve true asynchrony? Initially, I tried specifying "asynchronous: true" in the Ajax calls but it didn't make a difference. We primarily use IE7 in "quirks mode" (IE8) due to issues with the doctype from the original developers. Below is the code snippet:
function create_dashboard() {
// Code here
}
function tallyRefreshes() {
// Code here
}
function refreshComponent(id_wrapper, component_class) {
// Code here
}
The components currently refresh one after the other instead of concurrently, resulting in a lack of user control until all components have finished loading. How can I ensure truly asynchronous behavior?
Thank you in advance.