I need to create a loader div with an image while script.sh is loading
Here's my code:
<?php
if (isset($_POST['restartserver']))
{
shell_exec("my-script.sh");
}
?>
<html>
<body>
<div class="refresh">
<form method="post">
<p>
<button class="button" name="restartserver">Restart Server</button>
</p>
</form>
</div>
</body>
</html>
So when i click on the button i need a loading image , when the script.sh is loaded the image-loader disapper and you can click again the button in the div.
Actually when i click on the button the script runs correctly but i see that the browser is loading the script, when finished it reload the same page.
I just want a loder image.gif when the script is loading
I know that this can be done with Ajax but i didn't find a working example
Use jQuery for easy ajax. Following code assumes the restart script outputs "complete" when the reboot is done, and anything else for an error.
$('#loaderdiv').html('<img src="loader.gif" />');
$.get('http://path.to/restart.php', function(data){
if (data == "complete"){
$('#loaderdiv').html('Reboot Complete');
} else {
$('#loaderdiv').html('An Error Has Occured');
}
});
HTML
<div id="container">
<button id="runscript">Run Script</button>
</div>
Javascript
$(document).ready(function(){
$('#runscript').click(function(e){
e.preventDefault();
$('#container').html('<img src="loader.gif" />');
$.get('http://path.to/execute_sh_script.php', function(data){
// Code here executes once ajax is complete
$('#container').html('**strong text**');
});
});
});