EIP meet DWR, DWR meet EIP

My favorite AJAX framework out there is DWR as I've found it tremendously useful, developer friendly, and a breeze to implement. I originally used AJAX by writing my own non-abstractable-pseudo-framework and for the longest time I avoided AJAX frameworks because they were not extensible enough, didn't provide the functionality I needed, or just seemed to stick their grubby little paws into my code in ways I didn't desire. I finally adopted a framework when I discovered DWR, and it was my most wonderful day with AJAX. Thus, I've become quite attached to DWR.

I've toyed around with edit-in-place functionality in a few projects, but only on a small scale, and without using any 3rd party scripts. (I generally approach technologies in that manner, I like to know how it works before I start using it.) I wanted to thoroughly integrate an in-place editing system in a project I'm currently developing, and since by now I had experimented enough to know how the edit-in-place wheel rolls, I started looking around for a suitable wheel that somebody else had already built. The best I stumbled across is EIP, written by Joseph Scott (check out his blog at http://joseph.randomnetworks.com/).

EIP seemed to be a nice system, but it had one obstacle that needed to be overcome for it to be a viable option for me: it uses Prototype for AJAX, and I wanted DWR integration. Fortunately, this was relatively straight forward and there were no huge barriers to making DWR and EIP play well together. The only stumbling block was how to enable EIP to call methods opened up by DWR with variable numbers of arguments. A cool thing about javascript is that essentially every method accepts a variable number of arguments, despite what the method header (which is basically just a way to assign names to arguments) may declare. The tricky part was that somehow, EIP needed to be able to take:


dwr_params: {
p0: 0,
p1: 1
}

...

dwr_params: {
p0: 0,
p1: 1,
p2: 2
}


and then call:

DwrExposedClass.dwrExposedMethod(p0,p1,dwrCallback);
DwrExposedClass.dwrExposedMethod(p0,p1,p2,dwrCallback);

respectively. But there is no way to construct an argument list in a loop, except for to create the entire method call as a String and then use eval() to make it happen. I'm not a big fan of eval() (for reasons that may show up in a different post), and although I occasionally see it as necessary, I only resort to it after exhausting the possibility of other options.

The first thing that came to mind was currying, which (for the unfamiliar) lets you turn a method that takes multiple arguments into a method that takes one argument. This seemed like a good starting point because if I could call any DWR exposed method with only one argument, then it didn't matter how many additional arguments needed to be included. At that point I figured I could either curry an array of arguments down to one, or recursively curry until I arrived at a single argument method.

When playing around with how to implement such a solution, I discovered a much simpler way in rediscovering the apply() method of the javascript Function object. Essentially, arguments are passed as an array in javascript, evidenced by the fact that any number of arguments can be passed to any method, even one with zero declared parameters, and then referenced within the method by treating the local variable arguments as an array. Thus, at a basic level, the apply() method of a function can be used to apply an array of arguments to the function.

var args = [0,1,2,3];
DwrExposedClass.dwrExposedMethod.apply({},args);

Problem solved, I can now make any item editable and use DWR for AJAX with:

EditInPlace.makeEditable({
id: 'editableItemId',
... any other EIP params...
use_dwr: true,
dwr_method: DwrExposedClass.dwrExposedMethod,
dwr_params: { // any other data you want to pass
p0: 0,
p1: 'foo'
}
});

Feel free to use the script. You'll need DWR and Prototype.

Download the script here.