[Summary view] [Print] [Text view]

   1  
   2  /**
   3   * Provides AJAX-like page updating via AHAH (Asynchronous HTML and HTTP).
   4   *
   5   * AHAH is a method of making a request via Javascript while viewing an HTML
   6   * page. The request returns a small chunk of HTML, which is then directly
   7   * injected into the page.
   8   *
   9   * Drupal uses this file to enhance form elements with #ahah[path] and
  10   * #ahah[wrapper] properties. If set, this file will automatically be included
  11   * to provide AHAH capabilities.
  12   */
  13  
  14  /**
  15   * Attaches the ahah behavior to each ahah form element.
  16   */
  17  Drupal.behaviors.ahah = function(context) {
  18    for (var base in Drupal.settings.ahah) {
  19      if (!$('#'+ base + '.ahah-processed').size()) {
  20        var element_settings = Drupal.settings.ahah[base];
  21  
  22        $(element_settings.selector).each(function() {
  23          element_settings.element = this;
  24          var ahah = new Drupal.ahah(base, element_settings);
  25        });
  26  
  27        $('#'+ base).addClass('ahah-processed');
  28      }
  29    }
  30  };
  31  
  32  /**
  33   * AHAH object.
  34   */
  35  Drupal.ahah = function(base, element_settings) {
  36    // Set the properties for this object.
  37    this.element = element_settings.element;
  38    this.selector = element_settings.selector;
  39    this.event = element_settings.event;
  40    this.keypress = element_settings.keypress;
  41    this.url = element_settings.url;
  42    this.wrapper = '#'+ element_settings.wrapper;
  43    this.effect = element_settings.effect;
  44    this.method = element_settings.method;
  45    this.progress = element_settings.progress;
  46    this.button = element_settings.button || { };
  47  
  48    if (this.effect == 'none') {
  49      this.showEffect = 'show';
  50      this.hideEffect = 'hide';
  51      this.showSpeed = '';
  52    }
  53    else if (this.effect == 'fade') {
  54      this.showEffect = 'fadeIn';
  55      this.hideEffect = 'fadeOut';
  56      this.showSpeed = 'slow';
  57    }
  58    else {
  59      this.showEffect = this.effect + 'Toggle';
  60      this.hideEffect = this.effect + 'Toggle';
  61      this.showSpeed = 'slow';
  62    }
  63  
  64    // Record the form action and target, needed for iFrame file uploads.
  65    var form = $(this.element).parents('form');
  66    this.form_action = form.attr('action');
  67    this.form_target = form.attr('target');
  68    this.form_encattr = form.attr('encattr');
  69  
  70    // Set the options for the ajaxSubmit function.
  71    // The 'this' variable will not persist inside of the options object.
  72    var ahah = this;
  73    var options = {
  74      url: ahah.url,
  75      data: ahah.button,
  76      beforeSubmit: function(form_values, element_settings, options) {
  77        return ahah.beforeSubmit(form_values, element_settings, options);
  78      },
  79      success: function(response, status) {
  80        // Sanity check for browser support (object expected).
  81        // When using iFrame uploads, responses must be returned as a string.
  82        if (typeof(response) == 'string') {
  83          response = Drupal.parseJson(response);
  84        }
  85        return ahah.success(response, status);
  86      },
  87      complete: function(response, status) {
  88        if (status == 'error' || status == 'parsererror') {
  89          return ahah.error(response, ahah.url);
  90        }
  91      },
  92      dataType: 'json',
  93      type: 'POST'
  94    };
  95  
  96    // Bind the ajaxSubmit function to the element event.
  97    $(element_settings.element).bind(element_settings.event, function() {
  98      $(element_settings.element).parents('form').ajaxSubmit(options);
  99      return false;
 100    });
 101    // If necessary, enable keyboard submission so that AHAH behaviors
 102    // can be triggered through keyboard input as well as e.g. a mousedown
 103    // action.
 104    if (element_settings.keypress) {
 105      $(element_settings.element).keypress(function(event) {
 106        // Detect enter key.
 107        if (event.keyCode == 13) {
 108          $(element_settings.element).trigger(element_settings.event);
 109          return false;
 110        }
 111      });
 112    }
 113  };
 114  
 115  /**
 116   * Handler for the form redirection submission.
 117   */
 118  Drupal.ahah.prototype.beforeSubmit = function (form_values, element, options) {
 119    // Disable the element that received the change.
 120    $(this.element).addClass('progress-disabled').attr('disabled', true);
 121  
 122    // Insert progressbar or throbber.
 123    if (this.progress.type == 'bar') {
 124      var progressBar = new Drupal.progressBar('ahah-progress-' + this.element.id, eval(this.progress.update_callback), this.progress.method, eval(this.progress.error_callback));
 125      if (this.progress.message) {
 126        progressBar.setProgress(-1, this.progress.message);
 127      }
 128      if (this.progress.url) {
 129        progressBar.startMonitoring(this.progress.url, this.progress.interval || 1500);
 130      }
 131      this.progress.element = $(progressBar.element).addClass('ahah-progress ahah-progress-bar');
 132      this.progress.object = progressBar;
 133      $(this.element).after(this.progress.element);
 134    }
 135    else if (this.progress.type == 'throbber') {
 136      this.progress.element = $('<div class="ahah-progress ahah-progress-throbber"><div class="throbber">&nbsp;</div></div>');
 137      if (this.progress.message) {
 138        $('.throbber', this.progress.element).after('<div class="message">' + this.progress.message + '</div>');
 139      }
 140      $(this.element).after(this.progress.element);
 141    }
 142  };
 143  
 144  /**
 145   * Handler for the form redirection completion.
 146   */
 147  Drupal.ahah.prototype.success = function (response, status) {
 148    var wrapper = $(this.wrapper);
 149    var form = $(this.element).parents('form');
 150    // Manually insert HTML into the jQuery object, using $() directly crashes
 151    // Safari with long string lengths. http://dev.jquery.com/ticket/1152
 152    var new_content = $('<div></div>').html(response.data);
 153  
 154    // Restore the previous action and target to the form.
 155    form.attr('action', this.form_action);
 156    this.form_target ? form.attr('target', this.form_target) : form.removeAttr('target');
 157    this.form_encattr ? form.attr('target', this.form_encattr) : form.removeAttr('encattr');
 158  
 159    // Remove the progress element.
 160    if (this.progress.element) {
 161      $(this.progress.element).remove();
 162    }
 163    if (this.progress.object) {
 164      this.progress.object.stopMonitoring();
 165    }
 166    $(this.element).removeClass('progress-disabled').attr('disabled', false);
 167  
 168    // Add the new content to the page.
 169    Drupal.freezeHeight();
 170    if (this.method == 'replace') {
 171      wrapper.empty().append(new_content);
 172    }
 173    else {
 174      wrapper[this.method](new_content);
 175    }
 176  
 177    // Immediately hide the new content if we're using any effects.
 178    if (this.showEffect != 'show') {
 179      new_content.hide();
 180    }
 181  
 182    // Determine what effect use and what content will receive the effect, then
 183    // show the new content.
 184    if ($('.ahah-new-content', new_content).size() > 0) {
 185      $('.ahah-new-content', new_content).hide();
 186      new_content.show();
 187      $(".ahah-new-content", new_content)[this.showEffect](this.showSpeed);
 188    }
 189    else if (this.showEffect != 'show') {
 190      new_content[this.showEffect](this.showSpeed);
 191    }
 192  
 193    // Attach all javascript behaviors to the new content, if it was successfully
 194    // added to the page, this if statement allows #ahah[wrapper] to be optional.
 195    if (new_content.parents('html').length > 0) {
 196      Drupal.attachBehaviors(new_content);
 197    }
 198  
 199    Drupal.unfreezeHeight();
 200  };
 201  
 202  /**
 203   * Handler for the form redirection error.
 204   */
 205  Drupal.ahah.prototype.error = function (response, uri) {
 206    alert(Drupal.ahahError(response, uri));
 207    // Resore the previous action and target to the form.
 208    $(this.element).parent('form').attr( { action: this.form_action, target: this.form_target} );
 209    // Remove the progress element.
 210    if (this.progress.element) {
 211      $(this.progress.element).remove();
 212    }
 213    if (this.progress.object) {
 214      this.progress.object.stopMonitoring();
 215    }
 216    // Undo hide.
 217    $(this.wrapper).show();
 218    // Re-enable the element.
 219    $(this.element).removeClass('progess-disabled').attr('disabled', false);
 220  };