Struggles with jQuery and Bootstrap

As is usual when coding, things that you think will be "easy" end up requiring the most time. In my case, I decided to do some research on using jQuery to update Bootstrap progress bar since Fernando and were in charge of getting that done this week (along with a few other things). I have some experience in Javascript but almost none in jQuery so I figured I'd better start looking things up early.

So, on Tuesday I spent at least two hours trying to find decent examples of how to use jQuery with Bootstrap. After some searching I found some helpful tutorials and was able to piece together some code that would update the progress bar. However, this code was assuming that the progress bar was a fixed width (measured in pixels) but our progress bar's width is set by percentage, so it is more relative than absolute. I eventually discovered a way around that issue by directly setting the value of the CSS width property for the progress bar element:

var $bar = $('.progress-bar');

var incr = progressValue;

$bar.css('width',incr+'%');

$bar.html(incr+'%');

(I also later found that the "setInterval()" method call that I had seen in many of the tutorials was completely unnecessary since we did not need to continuously animate the progress bar.)

 Anyway, Fernando and I put the above code in a JS method and called it from the "onclick:" property of the button we were using to update the progress bar. We passed in a local variable from the view code to set the value of the progress bar, which in itself it a little tricky because you have to do "onclick: my_function('#{local_var_here}');" (and be sure to include the double quotes). So we reload the code and voila! the button click updates the progress bar. 

However, it would only do it one time per page load. We were using a random number generator for the value so the percentage should have changed with each click but it didn't. We tried using the jQuery "click()" and "on()" methods to attach an event handler to the button but nothing was working. We must have spent at least an hour and half at our pair programming session this morning trying to figure out why it was having this issue. I decided to do some additional research this afternoon and was finally able to figure out a solution. Instead of using "onclick:" to call the Javascript to update the progress bar, I used jQuery .bind('click', function(){...}); to ensure that the function that updated the progress bar was bound to the button we were using. I then used the onclick property of the button to called a JS method that randomly generated a number, which was then used to update the progress bar in the click event handler for the button.

UPDATE: After some additional testing of the progress bar, I found another bug where the button event handler would not fire after a page redirect (though it would still work fine if you just reloaded the page). After some googling, I discovered that you have to use $(document).on('click', '#element_id_here', function (){....}); in order to have the page find and locate the progress bar update button so it can "reattach" the click event handler after a redirect.

But, on the bright side, Fernando and I were able to get one of our other tasks done quite quickly. This task was to pop up a message when a certain button is clicked. We chose to use a small Bootstrap modal, which was fairly easy to implement from the example code on Bootstrap's site.