How to make such jquery declaration more compact?

Question

I'm using jeditable for around 30-40 fields of different type, that's why I have to write a number of the blocks

$(".editable-...type of element...").editable(method, {parameters})

for different type of elements I have in the form (string, int, different dropdowns). For example, here is the one for the string:

$(".editable-jedit-string").editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        cssclass: 'inherit',
        indicator: 'wird gespeichert...',
        style: 'display:inline',
        height: '15px',
        width: '150px',
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

and for the dropdown

**$(".editable-jedit-string-welle")**.editable("/Controller/Method",
    {
        submitdata: {
            ItemId: '@ViewData["ItemId"]'
        },
        **data: " {'A':'A','B':'B','C':'C'}",**
        type: "select",
        cssclass: 'inherit',
        indicator: '<span class="muted">wird gespeichert...</span>',
        style: 'display:inline',
        height: '15px',
        **width: '15px',**
        placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
        tooltip: 'Zum Bearbeiten doppelklicken...',
        event: 'dblclick',
        submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
    });

So, most of the parameters repeat all the time, while some (I tried to make them bold here, but instead they are in asterisks..) are different.

My question is, how I can make the code more compact? I have around 6 of such declarations and I think the code can be refactored to look better.

I can create parameters for all repeatable elements (button declaration, labels, style), but then I will still have to declare .editable() six times... I wonder, if it is possible to declare $(.class).editable() once and then change the parameter within it? In this way, I can declare first all repeatable parameters, and then go through elements and add additional data...

Any ideas are appreciated!

Answer 1

You could make an object with all the default options first, then use $.extend() to merge in the changes/new properties.

var myDefaults = {
    submitdata: {
        ItemId: '@ViewData["ItemId"]'
    },
    cssclass: 'inherit',
    indicator: 'wird gespeichert...',
    style: 'display:inline',
    height: '15px',
    width: '150px',
    placeholder: '<span class="muted">Zum Bearbeiten doppelklicken...</span>',
    tooltip: 'Zum Bearbeiten doppelklicken...',
    event: 'dblclick',
    submit: '<button class="btn btn-mini btn-primary btn-forced-margin" type="submit" >OK</button>'
};

$(".selector").editable("/Controller/Method", $.extend(true, {}, myDefaults, {
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

The $.extend() syntax is slightly tricky, so you can use .bind() to roll your own.

// create a function with your default parameters for $.extend()
var editableParams = $.extend.bind({}, true, {}, myDefaults); 

// usage
$(".selector").editable("/Controller/Method", editableParams({
    data: " {'A':'A','B':'B','C':'C'}",
    width: '15px'
});

Demo at http://jsfiddle.net/6GQ9Y/

$.extend() docs at http://api.jquery.com/jQuery.extend/

.bind() reference (and shim): https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

---

UPDATE

The .bind() method above is basically just a fancy way of creating a new function. It seems, however, that it is not supported in IE 8 and older. The same "shortcut" can be achieved with the following code:

function editableParams(options) {
    return $.extend(true, {}, myDefaults, options);
}

Answer 2

You can extract out the common properties into a common object.

var defaultEditableConfig = {
    width: 15px,
    height: 15px,
    ...
}

and then

$('.editable-class').editable($.extend({}, defaultEditableConfig, {
    data: { 'A' : 'a', 'B' : 'b' }
});

And of course you can wrap this in a utility method or something to make it easier to call with a signature like:

makeEditable(jQueryElementString, options);