AjaxifiedPopupForm widget for XWiki

ajaxifiedPopupForm.js

var XWiki = (function(XWiki){

  /**
   * Widget that takes a popup with a form in its content and auto-magically ajaxifies this form.
   */
  XWiki.AjaxifiedPopupForm = Class.create({

    /**
     * Some default options.
     */
    options: {

      // Should the content of the form submit response be set as popup content
      displayFormResponse: true,

      // A callback called when the form submit request response is arrived.
      // The response body is passed as the only argument.
      onComplete: Prototype.emptyFunction,

      // Submit button to be used. Default is empty, and when empty the following selector
      // "form input[type='submit']" will be applied to the popup content to find the submit button
      submitButton: undefined,

      // Cancel button to be used (behavior is to close the popup). Default is empty, and when empty
      // the following selector "div.buttons a.secondary" is applied to the popup content to find
      // the cancel button.
      cancelButton: undefined
    },

    /**
     * Constructor
     *
     * @param {Object} popup the popup to ajaxify the form in.
     * @param {Object} options to options for this ajaxifization.
     */
    initialize: function(popup, options){

      this.popup = popup;

      this.options = Object.extend(Object.clone(this.options), options);

      this.cancelButton = this.options.cancelButton || this.popup.dialog.down("div.buttons a.secondary");
      this.submitButton = this.options.submitButton || this.popup.dialog.down("form input[type='submit']")

      if (this.cancelButton) {
        this.cancelButton.observe("click", this.popup.closeDialog.bind(this.popup));
      }

      if (this.submitButton) {
        this.submitButton.observe("click", this.onSubmitClicked.bindAsEventListener(this));
      }

    },

    /**
     * Callback called when the submit button of the ajaxified form is clicked.
     */
    onSubmitClicked: function(event) {

      var form = this.popup.dialog.down("form");

      if (form.getAttribute("enctype") == "multipart/form-data") {
        // If the form is a multipart form, mister clean cannot magically ajaxify it, so we will use the well known
        // trick of sending synchronously the request to an hidden iframe.
        var hook = new Element('iframe', { 'class' : 'hidden', 'id' : 'captain_hook', 'name' : 'captain_hook' });
        hook.onload = function() {
          var result = window.frames['captain_hook'].document.getElementsByTagName("body")[0].innerHTML;
          if (this.options.displayFormResponse) {
            this.popup.setContent(result);
          }
          this.options.onComplete.call(this, result);
        }.bind(this);
        this.popup.dialogBox.down(".xdialog-close").insert({
          after: new Element("div", {'class' : 'loading popupLoading'}),
          before: hook
        });

        form.target = 'captain_hook';
        form.addClassName("hidden");
      }

      else {
        // This should be something we can send as an ajax request, so let's do it.
        event.stop();
        form.request({
          onCreate: function() {
            this.popup.setContent("<div class='loading popupLoading'></div>");
          },
          onComplete: function(transport) {
            if (this.options.displayFormResponse) {
              this.popup.setContent(transport.responseText);
            }
            this.options.onComplete.call(this, transport.responseText);
          }
         });
      }
    }

  });

  return XWiki;

})(XWiki || {});