I want to periodically check the status of a php script and display it on the browser. Here is the jQuery that is used to post.
$(document).ready(function() {
$("#tempbut").click(function(event){
$('#loader').show();
$('#mainarea').hide('fast');
$.post(
"template.php",
{
guide : $('#guide').val(),
title : $('#title').val()
},
function(data) {
$('#mainarea').empty();
$('#loader').fadeOut('slow');
$('#mainarea').append(data);
$('#mainarea').show('slow');
}
);
});
});
In the PHP Script (not posted), I echo statements such as "Building request...", "Sending request..." to inform the user of the progress. If I were not using jQuery post, I would be able to show the status using flush() and obflush() after every echo. Perhaps it is because the callback waits for the script to fully execute before outputting?
Thanks!
Looked into an implementation found at but had no luck.:
The script would output 9
Below is the code:
**progress.php**
<?php
session_start();
echo $_SESSION['status'];
flush();
ob_flush();
?>
**process.php**
- <?php
- session_start();
-
- for($i = 0; $i<10; $i++){
- $_SESSION['status'] = $i;
- sleep(1);
- }
-
-
- ?>
**index.php:**
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>jQuery.post demo</title>
- <script src="//code.jquery.com/jquery-1.10.2.js"></script>
- </head>
- <body>
-
- <form action="process.php" id="searchForm">
- <input type="text" name="s" placeholder="Search...">
- <input type="submit" value="Search">
- </form>
-
- <div id="result"></div>
-
- <script>
-
- $("#searchForm").submit(function startProcess(event) {
- event.preventDefault();
-
- //start your long-running process
- $.ajax(
- {
- type: 'GET',
- url: "process.php",
- async: true,
- success:
- function (data) {
- //do something - your long process is finished
- }
- });
- });
- $("#searchForm").submit(function getStatus(event) {
- event.preventDefault();
-
- //check your progress
- $.ajax(
- {
- type: 'GET',
- url: "progress.php",
- async: true,
- success:
- function (data) {
- //assume the data returned in the percentage complete
- var percentage = parseInt(data);
-
- //write your status somewhere, like a jQuery progress bar?
- $("#result").html(data);
- if (percentage < 8) {
- //if not complete, check again
- getStatus();
- }
- }
- });
- });
-
- </script>
-
- </body>
- </html>