Loading . Feature

Forum Moderators: open

Message Too Old, No Replies

Loading . Feature

dbarasuk

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

diddlydazz

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={
ajax:function(st)
{
this.show('load');
},
show:function(el)
{
this.getID(el).style.display='';
},
getID:function(el)
{
return document.getElementById(el);
}
}
</script>
<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;}
</style>

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>

dbarasuk

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

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

With code example

daveVk

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

See [w3schools.com...]

Below is there example modified for your case

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

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

</body>
</html>

Loading . Feature

dbarasuk

diddlydazz

dbarasuk

daveVk

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week