PHP AJAX loading please wait message

Hi,

I am new to ajax and need some help on how to add a Loading... Please Wait message.

I have a PHP script that once the user hits submit a remote execution is run on the server

exec('C:\test\psexec.exe -d schtasks /RUN /TN "Test"');

I know how to check if the exe is still running on the server using

exec ('tasklist /FI "IMAGENAME eq psexec.exe"');
However I want to be able to display a message while a script checks every 10 seconds if the exe is still running.

Thanks
kev8326Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

theodorejsalvoCommented:
Are you taking advantage of the readyState in your AJAX function?  If so, you could use the waiting state ("if(readyState == 2 || readyState == 3)") to run your exec ('tasklist /FI "IMAGENAME eq psexec.exe"'), and parse your output to display a message.

This code would go right above where you hand the returned ajax call (typically "if(readyState == 4)" << this line)

If you want to post your AJAX request code, I can show you where to put the insert.
0
kev8326Author Commented:
Hi,

I dont have any ajax in my script as its currently all php. If you need I can show you that?
0
theodorejsalvoCommented:
I'm not sure how much you know about AJAX, so forgive me if you know this already.

In short, AJAX is a way to load content inside a page without reloading the whole page.  This requires both the client (browser: IE, firefox, chrome) and the server (where you php code is executed) to work together.  A typical AJAX setup uses PHP for the serverside and javascript for the client side.

I'd rather send you to a tutorial with samples for the AJAX code.  When I first started with AJAX, I started with sample code and evolved it from there.  It's actually a handy little snippet to keep around.

This is a good learning tutorial for AJAX (IMHO): http://www.xul.fr/en-xml-ajax.html
0
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Marco GasiFreelancerCommented:
I did exactly the same thing you are trying to do. I had a form to insert product to buy into an order. In the onclick event a javascript function were called. This function did an Ajax call, but before this, it called another function, named ShowDialog() in wich I used Dojo to show a 'Please wait...' dialog with the classic flash-like animation.
So you have to write following lines in head section

<script type="text/javascript">
  var djConfig = {
    baseScriptUri : "../shared_scripts/dojo1.3.2/",
    parseOnLoad : true
//        extraLocale: ['en-us']
  };
</script>
<script type="text/javascript" src="../shared_scripts/dojo1.3.2/dojo/dojo.js"></script>
<script language="JavaScript" type="text/javascript">
  dojo.require("dijit.Dialog");
</script>

Then, in your page in wich you want to show the dialog write something like this

                <div dojoType="dijit.Dialog" id="pleaseWaitDialog" title="Attendere, prego..."
                     style="display:none;width:200px;">
                    <p align="center" id="AttendereText"><img src="scripts/dojo1.3.2/dijit/themes/tundra/images/treeExpand_loading.gif" width='20' height='20' alt='Lavoriamo per voi...' /></p>
                </div>

Finally, the ShowDialog() function to call before to do Ajax call:

function showDialog(){
    dijit.byId('pleaseWaitDialog').show();
}

And the function to call after Ajax call (using onComplete parameter):

function hideDialog(){
    dijit.byId('pleaseWaitDialog').hide();
}

This will work fine

Regards
0
kev8326Author Commented:
Hi,

I've added my code as I'm confused as to how I add this feature.

Here is the order of steps to process.
1. Users types search string
2. User hits submit
3. On submit a search is done and a exe is now running on the local server processing results. Its at this stage I want a "Please Wait" dialog and once the exe has ended to then show a message that "Processing has Completed"


<html>
<head>
</head>
<?php

if (isset($_POST['submit'])) {

	// extra code that writes search results to a file on server


	//Now execute task on server

	exec('C:\test\psexec.exe -d schtasks /RUN /TN "Test"');

}



?>




<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" > 

<table>
	<tr>
		<td><input type=text name="asset" size="20" value="<?php if(isset($_POST['asset'])) echo $_POST['asset'];  ?>"</td><td></td>
	</tr>
	<tr>
   	<td colspan="2"><input type="submit" name="submit" value="Search" > </td>
   </tr>
   </table>

</form>
</html>

Open in new window

0
Marco GasiFreelancerCommented:
Sorry for uncompleted answer. To use my solution you have to use the DOJO library. You can find it here: http://www.dojotoolkit.org/download/

Regards
0
Marco GasiFreelancerCommented:
I'm going to study your code: I'll come back soon.
0
Marco GasiFreelancerCommented:
Looking at your coe, I've seen that there is any Ajax call. I have a doubt: does the program that perform the server task  have a result? Where this result will be printed? In this case, I can suggest to do an Ajax call and I'll explain you how to do it. But to do it, it's necessary that you can print program output in a specific div of your page.
If server program has no result, we have to detect when this program end its task. In this case, you can change form action to a waiting.php page within you call server program and when search is completed you add a header(Location: original_page.php) to exit from tha waiting page and redirect user to the original page. Hope have been understandable...
0
kev8326Author Commented:
Hi

I had a thought and what I need is a way to dynamically show this code below. However instead of text it to show please wait

function tasklist() {
	
	sleep(5);
	
	$test = exec ('tasklist /FI "IMAGENAME eq mstsc.exe"');
		
	if (empty($test)) {

		echo "No process running";
	}
	else {
		echo "Process Running";
		tasklist();
	}
	
	return $test;
}

Open in new window

0
Marco GasiFreelancerCommented:
The problem seems to be that you wish call a javascript function from within a php function. Unfortunately, this isn't possible. My suggestion is to do something like

Have a page with the form without any action. When user click submit button (onclick=""myAjax();) a javascript function is called

function MyAjax(){
    showDialog();
    var updater = new Ajax.Updater('testdiv', 'tasklist_page.php', {
         method: 'get', insertion: 'bottom', onComplete: function() {hideDialog();}
    });
}

In this way, $test returned by php function will be printed in testdiv. Probably you have to clear the conditional statements about 'No process running" and "Process Running".

Hope this helps
0
kev8326Author Commented:
I thought i'd try something simple first just to get the DIV to refresh on a time interval however my code doesnt work. Can you help?
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function TimerTest()
{
	//for other browsers
	req = new XMLHTTPRequest();
	//for ie
	//req = new ActiveXObject("Microsoft.XMLHTTP");
	if (req != null)
	{
		req.open("GET", test4.php, false);
		req.send();
		if (req.responsetext != '')
		{
			divtag = document.getElementById('TestDiv');	
			divtag.innerHTML = req.responsetext;
		}
		else
			alert('error');
	}
	var t=setTimeout("TimerTest();",3000);
}



</script>
</head>
<body onload="TimerTest();">
<div id="TestDiv">
<?php echo include('test3.php'); ?></div> 
</div>
</body>
</html>

Open in new window

0
Marco GasiFreelancerCommented:
I'm not a javascript ninja, but I think you shouldn't call setTimeout in the same function that setTimeout calls. Maybe, you would call setTimeout in onload event and stopping it req.responsetext != '', but I think this is more complicated than doing what I suggested. About this, I forgot to say that you have to add these lines in the script file or in head section of your page

function addObservers() {
    $('form_code').observe('submit', orderProduct);
}
Event.observe(window, 'load', addObservers);

But is not so complex, uh?...
0
kev8326Author Commented:
Hi,

I was able to follow this link to resolve my issue and add ajax that auto refreshed.

http://www.aleixcortadellas.com/main/2009/02/11/232/ 
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.