Go back to the main page

Ajax indicator with jqueryui button

This article is over 2 years old. Proceed with caution.

Regards ♨ – Minimul


Live Demo


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.


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


     function save(){
        var self = $(this);
        el = $('#saveas');
        var opts = { buttons: { 'Close and fix': function(){ $(this).dialog('close');el.focus(); } } };
          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);
          self.button('option',{ icons: { primary: 'bounding-indicator' }, disabled: true });
          $.post('/drawn-out-ajax-call', $('form').serialize(), 
                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);


    #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;