Ajax indicator with jqueryui button

Live Demo

jquery,jqueryui/jquery-ui /javascripts/jqueryui/css/Aristo/jquery-ui-1.8.7.custom

Brief

The demo above will run a indicator animation inside of a jqueryui button. The button remains disabled until a success response is returned. The button starts off with a primary icon but that is not necessary. Indicators that are 16x16 work best.

HTML

<div id="toolbar">
  <form>
    <input id="saveas" name="saveas" size="18" />
    <button type="submit">Save</button>
  </form>
</div>

JS

     function save(){
        var self = $(this);
        el = $('#saveas');
        var opts = { buttons: { 'Close and fix': function(){ $(this).dialog('close');el.focus(); } } };
        if(!el.val()){
          alert('Save name is required',opts);
        }else if(!el.val().match(/^[a-zA-Z0-9-\s]+$/)){
          alert('Only alphanumeric characters, spaces, and hyphens are allowed.',opts);
        }else{
          self.button('option',{ icons: { primary: 'bounding-indicator' }, disabled: true });
          $.post('/drawn-out-ajax-call', $('form').serialize(), 
             function(){
                self.button('option',{ icons: { primary: 'ui-icon-squaresmall-plus' }, disabled: false });
                $('#toolbar button').after('Save was successfull');
                setTimeout(function(){ $('#toolbar .quick-msg').remove(); },2000);
              }
          );
        }
        return false;
      }
      // Event
      $('#saveas + button').button( { icons: { primary: 'ui-icon-squaresmall-plus' } } ).click(save);
  });

CSS

  <style>
    #saveas { font:400 16px Arial;padding:3px; }

    .quick-msg { padding-left:15px;font:900 12px Tahoma; } 

    .ui-button .ui-icon.bounding-indicator {
      background-image: url(/images/bounding-loader.gif);
      width: 16px;
      height: 16px; 
    }

    .ui-button.ui-state-hover .ui-icon.bounding-indicator {
      background-image: url(/images/bounding-loader.gif);
      width: 16px;
      height: 16px; 
    }

  </style>