Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Loading . Feature



7:47 am on Jan 27, 2014 (gmt 0)

5+ Year Member

Hi everyone,
There's an interesting feature I want to implent in an application I'm developping for my company. Using AJAX to get data from database with PHP, data retrieval can take a bit long. So I would like to put on the page something like Loading ... when data is not ready for presentation to the user and replace that animated feature with the real content retrieved from database when that data is ready. Does someone know how it is done or even if this is done with jQuery or another language?

What I'm looking for is for instance what you get when you visit soccer24.com. Before the match events get presented to the user, there's a loading feature on the page while data is being retrieved from database.

Thanks for your kind help


10:38 am on Jan 27, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

<added>i misread your post slightly - not sure if this is what you meant</added>

someone may have a better solution but this is what i use in a similar scenario

this will show a "please wait" box while the page loads

it is invoked when they click on the link to view the report

in the HEAD

<script type="text/javascript">
var ray={
return document.getElementById(el);
<style type="text/css">
#load{position:absolute; z-index:1; border:3px double #999; background:#f7f7f7; width:300px; height:70px; margin-top:-15px; margin-left:-150px; top:30%; left:50%; text-align:center; line-height:70px; font-family:"Trebuchet MS", verdana, arial,tahoma; font-size:10pt;}

and then in the BODY (anywhere)

<div id="load" style="display:none;">The report is loading... wait...</div>

and this on the link to view the report (or form ACTION)

<a href="run-report" onClick="return ray.ajax()">RUN REPORT</a>


1:41 pm on Jan 27, 2014 (gmt 0)

5+ Year Member

This what I'm looking and I was asking if it can be done with AJAX and how !

With code example


4:20 am on Jan 28, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

See [w3schools.com...]

Below is there example modified for your case

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
$("#div1").load("demo_test.txt"); // change to your php url

<div id="div1">...Loading...</div> // change this to visual effect you want


Featured Threads

Hot Threads This Week

Hot Threads This Month