Bootstrap progress bar update using jQuery/AJAX

One of the web apps I’ve worked on involved parsing and analyzing quite a bit of data from various sources. An initial prototype in PHP simple executed the ~20-30 second routine before displaying a page stating the task was done. With the move to an app engine, I pushed the task into a thread to avoid the long page load. Now the problem was not knowing when it had completed instead of waiting with no feedback! Sounded like a job for some kind of progress bar to me. I whipped one up using jquery and bootstrap and have been quite pleased with the result.

First, the server side app was modified with an ‘update-progress’ entry point that returns a simple text representation of the completion, like “53.12”. Just one number, so no need for JSON or XML, just a simple number is adequate.

The HTML markup is straight from the bootstrap help page. I decided to turn on the animated striped look while the server does it’s work.

<div class="progress progress-striped active" id="progressouter">
   <div class="bar" id="progress"></div>
</div>

The javascript is a standard setInterval to repeatedly query the value from the server via an AJAX (though not so much X) request every 1000ms and update the CSS width of the progress bar. I wanted to stop querying the server once the task was completed, so I test to see if the progress is really close to 100% and remove the timer object, as well as turning off the ‘active’ stripe animation and replacing inner html. The timer is wrapped in a document-ready test to verify the DOM is available before attempting to access it.

$(document).ready(function(){
  var progresspump = setInterval(function(){
    /* query the completion percentage from the server */
    $.get("/app/update-progress", function(data){
      /* update the progress bar width */
      $("#progress").css('width',data+'%');
      /* and display the numeric value */
      $("#progress").html(data+'%');

      /* test to see if the job has completed */
      if(data > 99.999) {
        clearInterval(progresspump);
        $("#progressouter").removeClass("active");
        $("#progress").html("Done");
      }
    })
  }, 1000);});

And that’s all there is to it.  If you found this useful or have any comments/question, let me know


Last modified on January 16, 2013. This entry was posted in Uncategorized and tagged , , , , , , . Bookmark the permalink.

5 Responses to Bootstrap progress bar update using jQuery/AJAX

  1. Pingback: Long Tail Optimization, the numbers of a happy accident | ElfGA - Alien Technology BlogElfGA – Alien Technology Blog

  2. Paul Harley says:

    Really useful info. I’m a backend person, but had to write some front-end with an updating progress bar, and your example here really helped me. Thanks very much for sharing it.

  3. That’s nice approach, but you may find useful to see my blog post on how to display task progress using the HTML progress element and ProgressEvent W3C recommendation: Progress Indicator for Ajax requests

  4. Bhumi says:

    Awesome blog having such a valuable content.

  5. dodu says:

    OpenClassrooms.com
    Parcours
    Cours
    Partenaires
    Forums
    Premium

    Rechercher
    Andrinirina Stian
    Fil d’Ariane
    Accueil Forum Site Web PHP Savoir si la requête SQL en PDO est vide
    Liste des forums Mes interventions Sujets suivis

    Rechercher sur le forum
    Rechercher dans le forum
    Partage
    Partager sur Facebook

    Partager sur Twitter

    Partager via Google +1
    Savoir si la requête SQL en PDO est vide
    Sujet résolu
    noerubiks
    Photo
    PHP
    1 juin 2013 à 17:48:51

    Salut à tous, je commence à désespérer, car je n’arrive pas à faire une condition, si le résultat de la requête en PDO est vide…

    Merci d’avance ! 🙂

    noé
    Aislinn
    Photo
    PHP
    1 juin 2013 à 18:22:02

    Tu cherches à écrire “si le résultat de la requête est vide, faire telle action” c’est ça ? Ou tu parles d’une condition dans la requête ? Si c’est le premier, après $q->execute(); fait $nbr=$q->rowCount();

    Ca te donnes le nombre de résultats de ta requête (zéro si le résultat est vide).

    Tu n’as plus qu’a tester if($nbr==0)

    Arcencielle – Site lesbien
    julp
    Photo
    1 juin 2013 à 18:28:22

    rowCount théoriquement ne permet pas de connaître le nombre de lignes renvoyées par une requête select, elle est prévue pour retourner le nombre de lignes affectées (delete, insert, update). Ça fonctionne uniquement avec quelques SGBD (MySQL notamment).

    Sinon, pour un code portable, il suffit d’utiliser une itération do/while après avoir tenté d’avoir lu la première ou bien utiliser fetchAll + count.

    if ($row = $statement->fetch()) {
    do {
    // traiter $row
    } while ($row = $statement->fetch());
    } else {
    // la requête n’a rien renvoyé
    }
    vs

    $rows = $statement->fetchAll();
    if (count($rows) == 0) {
    // aucune ligne renvoyée
    } else {
    foreach ($rows as $row) {
    // traiter $row
    }
    }
    PS : une itération do/while ou un fetchAll n’ont de sens que si l’on attend un nombre indéterminé de résultat. Ils ne sont pas nécessaire quand on sait que l’on a au plus 1 ligne (grâce aux contraintes – primaire ou unique).


    Edité par julp 1 juin 2013 à 18:31:53

    PHP : UTF-8, PDO, sessions, espace membre, limiter injections ; Apache : réécriture
    noerubiks
    Photo
    PHP
    1 juin 2013 à 19:56:58

    merci, sujet résolu ! 😉

    noé
    _Vinny_
    Photo
    Signaler Citer
    19 août 2016 à 23:45:10

    Pour information, il y a aussi rowCount(), exemple :

    1
    2
    3
    $sql = $db->prepare(‘SELECT user_id FROM users WHERE user_email = :email’) ;
    $sql->execute(array(’email’ => $themail) ;
    $num_of_rows = $sql->rowCount() ;


    Edité par _Vinny_ 19 août 2016 à 23:45:32

    Partager sur Facebook

    Partager sur Twitter

    Partager via Google +1
    Savoir si la requête SQL en PDO est vide
    Style
    Taille
    Code

    HTML
    Editeur ● MarkdownRépondre
    OpenClassrooms
    Qui sommes-nous ?
    Fonctionnement de nos cours
    Recrutement
    Nous contacter
    Professionnels
    Affiliation
    Entreprises
    Universités et écoles
    En plus
    Créer un cours
    CourseLab
    Conditions Générales d’Utilisation
    Suivez-nous
    Le blog OpenClassrooms
    English Español

Leave a Reply

Your email address will not be published.