How about a spinner that appears at the time an upload is started and disappears when the upload is finished? The concept is just like the example above, but instead of calling a background script for a progress indicator, we can just load an image like this at the start of the upload, and hide it at the end. Easy!This is exactly what I tried. See above.
<style type="text/css">
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.75) url(images/loading2.gif) no-repeat center center;
z-index: 10000;
}
</style>
FORM<form class="form horizontal">
<div class="row">
<label class="col-xs-4">Your Name:</label>
<div class="col-xs-8">
<input type="input" class="form-control" />
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
Spinner overlay<div id="loader"></div>
jQuery<script>
var spinner = $('#loader');
$(function() {
$('form').submit(function(e) {
e.preventDefault();
spinner.show();
$.ajax({
url: 't2228.php',
data: $(this).serialize(),
method: 'post',
dataType: 'JSON'
}).done(function(resp) {
spinner.hide();
alert(resp.status);
});
});
});
</script>
<?php
//echo $_REQUEST["updateStageButton"];
//echo $_SERVER['REQUEST_METHOD'];
//echo "<br />";
if($_SERVER['REQUEST_METHOD']="POST")
{
if (array_key_exists("poid",$_REQUEST))
{
$poid=$_REQUEST["poid"];
}
if (array_key_exists("submitFormName",$_REQUEST))
{
$submitFname=$_REQUEST["submitFormName"];
}
if (array_key_exists("updateStageButton",$_REQUEST))
{
$statusChange=$_REQUEST["updateStageButton"];
$queryText=getProductionOrder($poid);
$result = querySelectDB($queryText);
$row=mysqli_fetch_row($result);
if($statusChange==160)
{
$recordsAffected = updateWorkStatus($row[1],161);
$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 161);
}//if
if($statusChange==161)
{
$recordsAffected = updateWorkStatus($row[1],162);
$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 162);
}
mysqli_free_result($result);
}
}
if(empty($poid))
{
$poid=$_GET['poid'];
}
?>