Three Button Editable

Blog Projects
jeditable jquery
HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Maybe your get greedy and two buttons in you in place editor is not enough. Maybe your boss says submit and cancel is not enough. He want to have maybe button too. Maybe you want to be as confusing as Excel save dialogue. This is a walkthrough on how to add the third button.

Available methods for creating custom input

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.

For this example we are only interested in buttons method:

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.

Creating custom input

It all starts with adding custom input type called threebutton.

 $.editable.addInputType('threebutton', {
 });

Right now it does not do much anything. Since no methods are defined plugin will call the default methods. Default buttons method will create submit and cancel buttons if settings.submit and / or settings.cancel is present.

Click me to see what happens!

Add third button

Lets move on and add another button. First we create a button and store it in variable third. We set the value of button to something nice and append it to the form. Note! Inside custom methods this always refers to the form.

 $.editable.addInputType('threebutton', {
     buttons : function(settings, original) {
         var third = $('<input type="button">');
         third.val("I am number three");
         $(this).append(third);
     }
 });
Click me to see what happens!

Oh noes! Submit and cancel buttons are gone. Why is this? Custom buttons method should create all buttons. Now we have two options. One is to code missing buttons ourselves. Since we are lazy lets use shortcut. We will call the default buttons method.

 $.editable.addInputType('threebutton', {
     buttons : function(settings, original) {
         var default_buttons = $.editable.types['defaults'].buttons
         default_buttons.apply(this, [settings, original]);

         var third = $('<input type="button">');
         third.val("I am number three");
         $(this).append(third);
     }
 });
Click me to see what happens!

Final touches

Our custom input is almost ready. We still need to add some action to third input. Lets also make its value configurable via settings hash. We also need to add actual input element. We can use a shortcut and call default function for creating input type of text.

 $.editable.addInputType('threebutton', {
     element : $.editable.types.text.element,
     buttons : function(settings, original) {
         var default_buttons = $.editable.types['defaults'].buttons
         default_buttons.apply(this, [settings, original]);

         var third = $('<input type="button">');
         third.val(settings.third);
         $(this).append(third);

         $(third).click(function() {
             alert("Third button clicked");
         });
     }
 });
Click me to see what happens!

What now?

You need atleast version 1.4.0 of Jeditable to make custom inputs. So donlnoad latest source or minified (recommended). For more examples you might want to check default custom inputs.



When asking a question please include an URL to example page where the problem occurs. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

© 2013 Mika Tuupola.