summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/buttons.js
blob: 714295764e143814902051efaa9307665c6ff4ca (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
 * Buttons.js
 *
 * Use bootstrap loading state after submitting a form.
 *
 * Some form inputs are validaded before the submission
 * so triggering loading state on click events is not a
 * good idea. If the validation fails the errors will 
 * be displayed but the button would be in loading state.
 *
 * We used to trigger it based on form submission but
 * we have a few forms that contain multiple buttons.
 * So now we mark the buttons as clicked on click and 
 * put the clicked button into loading state on submit.
 *
 */

(function() {
  markAsClicked = function () {
    var btn = $(this)
    btn.addClass('clicked')
    setTimeout(function () {
      btn.removeClass('clicked')
    }, 1000)
  };

  markAsLoading = function(submitEvent) {
    var form = submitEvent.target;
    $(form).addClass('submitted')
    // bootstrap loading state:
    $(form).find('.btn.clicked[type="submit"]').button('loading');
  };

  $(document).ready(function() {
    $('form').submit(markAsLoading);
    $('.btn[type="submit"]').click(markAsClicked);
  });
  
}).call(this);