Manipulating the value passed for ‘id’ prior to a jeditable request

I had a proper headache with this today. I (very) occasionally use the jeditable plugin to provide in-place editing on some fields. However, one thing I don’t particularly like about jeditable (it rocks in general) is the way it sends the id of the element that fired it’s event as the value for whatever settings.id is set to. For example, if you have a list of items on the page, each with an in-place editable span, you will need to add some unique reference to each jeditable request so you can retrieve the correct element from the database, change it to whatever the user has entered, and save it. Using jeditable you would need to specify your, say, span, as follows:

<span class="inplace" id="2334">Blah</span>

The problem with this is if you have another list of elements on the same page which also have in-place editable elements. There is therefore a chance that you will render two spans on the same page with the same id. This may cause problems, and it generally isn’t very nice. You should really be ensuring that your editable span has a unique id by using a prefix in it’s id attribute, for example:

<span class="inplace" id="Comment_2334">Blah</span>

You’ve now created a new problem because of the way jeditable works. It will send the following data in the request:

{ id: 'Comment_2334', value: 'Blah' }

Which means that if, like me, you use asp.net MVC, and you use model binding in your action method:

public ActionResult SaveComment(long id, string value)

You will get a parse error when jeditable makes it’s request because it can’t parse “Comment_2334” as a long for the id parameter. You need to alter the id prior to the request being made. I searched high and low for a solution to this, and eventually concocted my own. The following will alter the id prior to the request being made, therefore not breaking model binding and using html elements with unique ids:

$('.inplace').each(function() {
    var clickedElem = this;
    $(clickedElem).editable('/Forum/SaveComment', {
        type: 'text',
        indicator: 'Saving',
        tooltip: 'Click here to edit',
        onblur: 'submit',
        select: true,
        submitdata: { id: clickedElem.id.substring(8) // Alter the id prior to the request being made - basically, omit the Comment_ prefix
    });
});

I really hope this saves someone a lot of time and stress.