Solved

AJAX Please wait while your page is loading, script problem

Posted on 2009-04-01
2
1,211 Views
Last Modified: 2012-05-06
Hello,

I have a multi page form, page 4 loads to slow so I wanted to use a loader, ajax or otherwise, to notify the customer that their request is being processed.  Just need a simple way for now I plan on recoding the entire form soon.

Below is what I have, found on a forum, doesnt appear to work at all.

Any thoughts?

Thanks,
<script type="application/javascript">

	

	function getHTTPObject() {

	if (typeof XMLHttpRequest != 'undefined') {

	return new XMLHttpRequest();

	}

	try {

	return new ActiveXObject("Msxml2.XMLHTTP");

	} catch (e) {

	try {

	return new ActiveXObject("Microsoft.XMLHTTP");

	} catch (e) {}

	}

	return false;

	}

	

	var http = getHTTPObject();

	

	function handleHttpResponse() {

	

	if (http.readyState == 4) {

	var temp = http.responseText;

	document.getElementById("PHPDATA").innerHTML=temp;

	}

	}

	

	

	function LoadData(){

	

	var url = "main.php?type=cp&page=4";

	http.open("GET", url, true);

	http.onreadystatechange = handleHttpResponse;

	http.send(null);

	}

	</script>

    </head>

    <body onload="javascript:LoadData()">

   

   <div id="PHPDATA">

    <span class="teal_header" >

    	<h4>Please wait as we process your request</h4>

    </span>

	<p class="body" style="text-align:center;">

    	This should only take a moment.

    </p>

   </div>

Open in new window

0
Comment
Question by:vrmetro
2 Comments
 
LVL 3

Accepted Solution

by:
FirestormX earned 500 total points
ID: 24043367
It depends on what is slowing down the last page of the form. If it is slow because it is doing some heavy processing (such as editing a large image or something), then there isn't a whole lot you can do to show that the page is loading.

It MIGHT be possible to create a "loading" image (or soemthing) and make it display that in the HTML, then right after it is displayed, you do your heavy processing functions, then in your <body> tag, you make an "onload" change the image back. Like so:

<html>
<head></head>
<body onload="document.getElementById('loading').style.display='none';">
<img src="loading.gif" alt="" id="loading" />
<?php
//heavy stuff
?>
</body>
</html>

I have no idea if this will work, and I would think it would depend on the browser (if it will display part of the data if it hasn't recieved all of it), but in general, I would say that what you are asking isn't possible if you are loading a page.
IF you were taking the data from the form and dynamically processing it in ajax, THEN you could do something like
<form onsubmit="submit_form(this)">
Then in the submit_form() javascript function, you can make a loading image appear, then do your processing, then when the readyState of the ajax gets to 4 (finishes) you can change the loading image to a success image.
0
 

Author Comment

by:vrmetro
ID: 24043659
@FirestormX

Good info, thank you.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
echo button 13 47
Re-position sub-options beneath the TAB 7 42
Wordpress Body Class 5 12
How to fetch your row in php 14 0
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now