Question

We’re currently not using any serious client side framework besides jQuery (and jQuery.ui + validation + form wizard plugins).

A problem that surfaces a few times in our code is this:

1. We have a button that initiates an Ajax call to the server.
2. While the call is taking place, we display a “loading” icon with some text
3. If the server returns a result too quickly (e.g. < 200 ms), we “sleep” for 200 millis (using setTimeout()), to prevent flickering of the waiting icon & text.
4. After max(the call returns, a minimal timeout), we clear the loading icon & text.
5. We then either display an error text, if there was some problem in the ajax call (the server doesn’t return 500, but a custom json that has an “error message” property. In fact, sometimes we have such a property in the response per form field … and we then match errors to form fields … but I digress).
6. In case of success, we do … something (depends on the situation).

I’m trying to minimize code reuse, and either write or reuse a pattern / piece of code / framework that does this. While I probably won’t start using an entire new heavy-duty framework just for this use case, I would still like to know what my options are … perhaps such a client-side framework would be good for other things as well. If there’s a lightweight framework that doesn’t require me to turn all my code upside down, and I could use just on specific cases, then we might actually use it instead of reinventing the wheel.

I just recently heard about Ember.js – is it a good fit for solving this problem? How would you solve it?

Answer 1

$(function(){
 var buttonSelector = "#button";
 $('body').on({'click': function(evt){
    var $button = $(this);
    $button.toggleClass('loading');
    var time = new Date();
    $.get('some/ajax').then(function(data,text,jqXhr){
   // typical guess at load work
       $button.empty();
       $(data).wrap($button);
    }).fail(function(data,text,jqXhr){
     alert("failed");
    }).done(function(data,text,jqXhr){
       var elapsed = new Date();
      if((elapsed - time) < 200){
        alert("to short, wait");
      }
      $button.toggleClass('loading');
    });
  }},buttonSelector,null);
});