Custom input types for edit in place

I have received many feature requests lately. Most of them have been worth of adding. People have different needs. But I have been worrying about Jeditable becoming feature creep. Thats why I figured out another aproach.

For those in hurry. Check the custom input types demo for some proof on concept inputs.

Write your own input types

Sometimes you need multiple selects. Your form might need special third button which is not submit or cancel. Sometimes you want to use some other plugin such as Date Picker for editing.

There is no point adding separate parameter for all of these. Code would become bloated. Thus I have been working on enabling other developers to add new input types. Think of it as plugins for in place editor plugin.

Simple example

Let’s add new input type masked. It will be normal text input with Josh Bush’s Masked Input plugin applied.

$.editable.addInputType('masked', {
    element : function(settings, original) {
        var input = $('<input type="text">').mask(settings.mask);
        $(this).append(input);
        return(input);
    }
});

Code defines a method element(settings, original). It creates a new input and attaches Masked Input plugin. Input is then appended to form Jeditable created. Form is available inside methods as this. Last the created input is returned.

Another example

Second example uses three out of five methods available to plugins. It will build timepicker from three selects. It uses Jason Huck’s Time Picker plugin.

$.editable.addInputType('timepicker', {
    element : function(settings, original) {
        var input = jQuery('<input type="hidden">');                
        $(this).append(input);
        return(input);
    },
    submit : function (settings, original) {
        var value = $("#h_").val() + ":" + $("#m_").val() + $("#p_").val();
        $("input", this).val(value);
    },
    plugin : function(settings, original) {        
        $("input", this).filter(":hidden").timepicker();
    }
});

First method element(settings, original) creates hidden input element. It will be used for storing the final value before submitting. Input is attached to form and returned. You always need to return the created element.

Second method submit(settings, original) is called before form is submitted. It collects hour, minute and am/pm from selects and creates a string. This string is the stored in previously created hidden input.

Third method plugin(settings, original) attaches Time Picker plugin to previously created hidden input. Again inside function the form is available as this.

Now when I have explained this I will tell you a tip. In this example you could leave out the element() method. If you don’t provide element() Jeditable will create a hidden input by default.

For more examples you can check source code of example inputs in GitHub.

All methods explained

When creating custom input type you want to define one or several of these methods. None of them are mandatory.

$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { },
    reset   : function(settings, original) { }
});

All methods receive two parameters. Settings is Jeditable settings hash. Original is the original element which was clicked. Method content() also receives third parameter string which is the value(s) input should be set to. Inside all methods this represents the form.

• element(settings, original) should create input element and attach it to form. Form is available inside function as this. This input element stores the final value to be submitted to server. Finally function should return the newly created element. If you do not provide this method an hidden input will be created by default.
• content(string, settings, original) should set the value of custom input. For example for multiple selects it should set the selected options in each select.
• buttons(settings, original) should create and attach buttons to form. If this is not provided submit and cancel buttons are added according to settings hash.
• submit(settings, original) is called before submitting the form. It should set the value of input element created by element(). This is only needed in special cases such as having multiple selects.
• plugin(settings, original) can be used for attaching any 3rd party plugins.

This is second version of plugin api. First one was crap so I rewrote it. Currently I am happy with it but I still would like to receive any feedback. If you write any custom input types let me know!

Download

You can download several flavours: source and minified.

Tweet

Tagged with: Javascript   Jeditable   Jquery