Retrieving data from a web server using Ajax is a great way to load the data on the web page without having to require the page to be reloaded. However, getting that data may take some time and you may want to provide the user with a visual representation that something is “happening”.
The common approach is to either provide the user with some type of alert, pop-up, or just display a spinning icon. In this tutorial, we will cover how to create a web page that contains a link that will initiate this type of process. We will not go into the specifics related to Ajax, just provide you with some sample code that you can use to integrate into your web projects.
In the example code below, you will notice some basic HTML and CSS markup. In the JavaScript section, there are three functions provided. Two of the functions simply handle the showing and hiding of the modal type pop-up thatwill be displayed once the link is clicked.
We consider it to be modal because the rest of the page is not accessible until the pop-up is closed. We do this by introducing an additional
When this modal pop-up is displayed, we also display the fade div and apply some styles such as opacity so that the user can slightly see the contents in the background. In the loadAjax() function, all we are doing is showing and hiding this modal pop-up during the process of starting and ending our Ajax process.
Example
The following snippets of code can be used to create a simple page that contains a link. When clicked, will display a loading “spinner” that will be displayed until the data called by the Ajax function is retrieved from the web server.
The CSS can be located within the