homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Loading . Feature
dbarasuk

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

 

diddlydazz

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

5+ Year Member



 
Msg#: 4640452 posted 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

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

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