BgImages with AJAX

Overview

This example will run a natural horizontal progress bar with background pictures, in asynchronous mode.
Use a simple (HTML_)AJAX server with only a PHP function as callback.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

And also but optional :

Explains step by step

Lines 12-17: clean-up session data when user-task is over (progress meter at 100%). The default behavior of AJAX progress bar is to reload the same page when task is complete. Use QueryString "reload=true". To change this behavior, you have to modify content of HTML_Progress2.onComplete JavaScript variable (See example 15.4 with usage of Scriptaculous AJAX framework).

Lines 21-39: Level design with all API to define look and feel of your progress bar.

Line 40: function HTML_Progress2::registerAJAX, allow to identify components of (HTML_)AJAX server. Here we don't use the default server name ('server.php') but script 'phpcb_server1.php' that will handle through a simple PHP function getPercentage the simulation of a user-task that take many cycles to complete, and return new status of the progress bar (percentage key-value pair).

Line 49: We don't reuse CSS external file, so we put inline all styles required to display the progress bar (as defined by level design : lines 21-39).

Line 54: We include the necessary JavaScript backend to handle normal and AJAX progress bar.
Other possibilities are :

Line 56: Do all job to initialize references to AJAX server and JS client librairies used. Will print these lines:

<script type='text/javascript' src='phpcb_server1.php?client=all'></script>
<script type='text/javascript' src='phpcb_server1.php?stub=getpercentage'></script>
<script type="text/javascript">HTML_AJAX.defaultServerUrl = 'phpcb_server1.php'</script>

Line 60: We identify for HTML_Progress2/HTML_AJAX JS backend what remote function to call.

Line 66: Very simple User Interface to start the remote task (simulation) and update the progress bar

Line 67: Produces only HTML tags to show the progress bar.

warning  If you want to use this pattern, you have to change only content of getPercentage function in phpcb_server1.php script (lines 15-16) and put a real user-task rather than a simulation.

Source Code

default1.php

  1. <?php
  2. /**
  3. * Basic AJAX example that used a PHP callback function
  4. * to handle progress bar responses
  5. *
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11.  
  12. if (isset($_GET['reload'])) {
  13.     session_start();
  14.     unset($_SESSION['progressPercentage']);
  15.     session_destroy();
  16.     die('Job is over !');
  17. }
  18.  
  19. require_once 'HTML/Progress2.php';
  20.  
  21. $pb = new HTML_Progress2();
  22. $pb->addLabel(HTML_PROGRESS2_LABEL_TEXT, 'txt1', 'Basic AJAX Progress2 example 1');
  23. $pb->setIdent('PB1');
  24. $pb->setCellCount(20);
  25. $pb->setCellAttributes(array(
  26.     'active-color' => '#000084',
  27.     'inactive-color' => '#3A6EA5',
  28.     'width' => 25,
  29.     'spacing' => 0,
  30.     'background-image' => 'download.gif'
  31. ));
  32. $pb->setBorderPainted(true);
  33. $pb->setBorderAttributes('width=1 style=inset color=white');
  34. $pb->setLabelAttributes('pct1', array(
  35.     'width' => 60,
  36.     'font-size' => 10,
  37.     'align' => 'center',
  38.     'valign' => 'left'
  39. ));
  40. $pb->registerAJAX('phpcb_server1.php', array('getpercentage'));
  41. ?>
  42. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  43.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  44. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  45. <head>
  46. <title>Basic Ajax Progress2 example 1</title>
  47. <style type="text/css">
  48. <!--
  49. <?php echo $pb->getStyle(); ?>
  50.  
  51. body {background-color: #EEEEEE; }
  52.  -->
  53. </style>
  54. <script type="text/javascript" src="HTML_Progress2.js"></script>
  55. <?php
  56. echo $pb->setupAJAX();
  57. ?>
  58. <script type="text/javascript">
  59. //<![CDATA[
  60. HTML_Progress2.serverCallback = 'getPercentage';
  61. //]]>
  62. </script>
  63. </head>
  64. <body>
  65.  
  66. <a href="javascript:HTML_Progress2.start('<?php echo $pb->getIdent(); ?>');">Start</a>
  67. <?php $pb->display(); ?>
  68.  
  69. </body>
  70. </html>

phpcb_server1.php

  1. <?php
  2. /**
  3. * Simple server with PHP callback function, that will serve user task script responder
  4. *
  5. * @version    $Id: phpcb_server1.php,v 1.1 2007/01/22 18:04:51 farell Exp $
  6. * @author     Laurent Laville <pear@laurent-laville.org>
  7. * @package    HTML_Progress2
  8. * @subpackage Examples
  9. * @access     public
  10. */
  11. session_start();
  12.  
  13. function getPercentage()
  14. {
  15.     $newVal = $_SESSION['progressPercentage'] + mt_rand(1, 25);
  16.     $_SESSION['progressPercentage'] = min(100, $newVal);
  17.  
  18.     // should return at least an array with one key ('percentage') and its value
  19.     $status = array('percentage' => $_SESSION['progressPercentage']);
  20.     return $status;
  21. }
  22.  
  23. require_once 'HTML/AJAX/Server.php';
  24.  
  25. // register normal function
  26. $callback = 'getPercentage';
  27.  
  28. $server = new HTML_AJAX_Server();
  29. $server->registerPhpCallback($callback);
  30. $server->handleRequest();
  31. ?>