Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1258
  • Last Modified:

AJAX Please wait while your page is loading, script problem

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
vrmetro
Asked:
vrmetro
1 Solution
 
FirestormXCommented:
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
 
vrmetroAuthor Commented:
@FirestormX

Good info, thank you.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now