Creating a dynamically updated progress bar with Rails / JQuery?

Question

This is my first “general” SO question - I'm not looking for someone to write one line of code for me, I just need some advice

I am looking for a method for implementing a progress bar / thermometer (ideally in jquery), which is dynamically updated when users enter data into a form in my Rails application. I am not interested in the meaning of the form fields; they are simply filled or not. Individual fields will have hardcoded weights (i.e. filling in your name gives you 1 point, email 10 points, etc.), which increase the score / percentage of the status bar very ayaxi-y, asynchronously. I do not want to publish or update progress bar status information.

I got the feeling that I would have to use some jQuery library as one of the following:

• JQuery ProgressBar
• ProgressBarDemo

Here's the kicker: I can't even figure out that these progress indicators are accepting data from user input in the Rails FormHelper form. I looked through all the API documents and class methods and I don’t know where to start!

How about this? Can you point this n00b in the right direction? What good examples could I see?

Thanks in advance!

~ Dan

Answer 1

I think you could just do it all through jQuery. This is how I might think that this works, i.e. Not writing code, but helps you think more about it.

Firstly, you have several inputs, let's just say that there are 5 to make it easy, and they all are text type.

<input type="text" name="first" value="" /> <input type="text" name="second" value="" /> <input type="text" name="third" value="" /> <input type="text" name="fourth" value="" /> <input type="text" name="fifth" value="" /> 

Then let's say that this means that each of them costs 20%, and your progress bar starts at 0 when you enter the page.

HTML:

 <div id="progressbar"></div> 

JQuery

 $( "#progressbar" ).progressbar({ value: 0 }); 

Then the simple task is to update this value when each item is changed.

First find the changes:

 $('input').change(function(){ // Code goes here to update }); 

In fact, the next thing you need to remember is that value is both the receiver and the setter. So just get the value, assign it to a variable, and then update the value, which is likely to look something like this.

 currentValue = parseInt($("#progressbar").progressbar('value')) + 20; $("#progressbar").progressbar('value',currentValue); 

Again, I have not tested this, but this is my best guess about how very easy it is to do it.

Answer 2

Besides what Mitch said. I suggest using the focusout() event that jquery provides. You can then check each input field for your content as soon as the user leaves it.