homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Loading . Feature

5+ Year Member

Msg#: 4640452 posted 7:47 am on Jan 27, 2014 (gmt 0)

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



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4640452 posted 10:38 am on Jan 27, 2014 (gmt 0)

<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>


5+ Year Member

Msg#: 4640452 posted 1:41 pm on Jan 27, 2014 (gmt 0)

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

With code example


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4640452 posted 4:20 am on Jan 28, 2014 (gmt 0)

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


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved