2

I copied and pasted the code from the following Progress Tracker thread. Build Step Progress Bar (css and jquery)

Based on an update from my Firebase server, I would like to update the <li class = "progtrckr-todo": to <li class = "progtrckr-done":

<ol class="progtrckr" data-progtrckr-steps="3">
    <li class="progtrckr-todo">Washing</li>
    <li class="progtrckr-todo">Drying</li>
    <li class="progtrckr-todo">Ready for Pickup</li>
</ol>

How do I update the class in HTML given a new response from my Firebase database?

Thanks!

Community
  • 1
  • 1
Gary
  • 2,137
  • 3
  • 23
  • 41

1 Answers1

3

There are three steps to achieving this with Firebase.

  1. Give the progtrckr an id.
  2. Create a Firebase listener that indicates when the progress is done.
  3. Change the style on the element depending on the snapshot's value.

-

// #1
var progtrckr = $('#progtrckr');
// #2
var ref = new Firebase('<your-firebase-db>/status');
ref.on('value', function(snap) {
   // #3
   var status = snap.val();
   // Start with a clean slate of classes
   progtrckr.removeClass(); 
   switch (status) {
      case "WASHING":
        progtrckr.addClass('progtrckr-todo');
        break;
      case "DRYING":
        progtrckr.addClass('progtrckr-something');
        break;
      case "READY FOR PICKUP":
        progtrckr.addClass('progtrckr-done');
        break;
   }
});
David East
  • 31,526
  • 6
  • 67
  • 82
  • David, thanks for the quick response. My question now is getting a little more specific to the application that I'm doing. I have multiple users in my database, and I will be checking whether the `State` of the user changes. I'll be checking if the state changes from `Washing`, to `Drying` to `Ready for Pickup`. In var ref = new Firebase() what directory do I link to, if I'm not sure which user will be chosen? – Gary Sep 22 '15 at 21:32
  • Open up a new question and I'll have a better format to answer :) – David East Sep 22 '15 at 21:33
  • Actually, wait. Don't worry about another question. I can answer that here. – David East Sep 22 '15 at 21:40
  • Thanks David! One more question! Can I make this this `switch` statement update sequentially? So, once the `status` changes, `Washing` update to done, and if the `status` changes again, `DRYING` updates to done, and so on? – Gary Sep 22 '15 at 21:51
  • You can take this same approach but with an object with more information about the status and switch off of that. – David East Sep 22 '15 at 21:53
  • David, this does not seem to be working... even when the `status` is definitely WASHING, the class does not update. Any ideas why it's not updating when I utilize your code above? – Gary Sep 23 '15 at 01:40
  • Nick, I'm not familiar with the way the tracker works. However, the concept above using Firebase is the way to go. If you need more specific help try making a reproducible example on JSBin. – David East Sep 23 '15 at 16:39