Recently I’ve been wondering how to overwrite the initialize() method in a class created using Prototype’s Class.create. I wanted to make multiple requests using the same Ajax.Request instance and block it from making the request automatically after it had been instantiated.

Diving in

I wanted to modify the initialize method on Ajax.Request, but did not want to modify the contents of prototype.js. The main problem was the $super argument, which is an automatic reference to the method in the parent class. Prototype documentation (http://www.prototypejs.org/learn/class-inheritance) explains it well:

When you override a method in a subclass, but still want to be able to call the original method, you will need a reference to it. You can obtain that reference by defining those methods with an extra argument in the front: $super. Prototype will detect this and make the overridden method available to you through that argument.

It is used when calling Class.create. However, it is possible to call addMethods() (which Class.create also uses) on the class we want to modify with a hash of properties that will overwrite the original methods. Consider the following example:

Ajax.Request.addMethods({
  // Overwrite the constructor, adding the autoStart option
  initialize: function($super, url, options) {
    $super(options);
    this.transport = Ajax.getTransport();
    this.original_url = url;
    if (options.autoStart !== false) this.request();
  },
  // Store the original request()
  original_request: Ajax.Request.prototype.request,
  // Allow the request to be called without the
  // argument, defaulting to the url sent
  // during initialization
  // Also, allow multiple requests from the same Ajax.Request object
  request: function(url) {
    this._complete = false;
    if (!url) url = this.original_url;
    this.original_request(url);
  }
});

What this change does is introducing a new option to the Ajax.Request constructor (autoStart) which allows us to create a new Ajax.Request object without actually calling the request. We can do it afterwards with the request() function. We can also make the request call multiple times using the same Ajax.Request instance.

(more…)