Password Support for Jeditable, a Cool jQuery Plugin

Posted by Codehead on August 28, 2008 at 7:26 pm · Under AJAX, JavaScript, Web Development

Here is the original plugin:
http://www.appelsiini.net/projects/jeditable

It let’s you implement inline editing capabilities and it’s supported by major browser.
Here are some examples:
http://www.appelsiini.net/projects/jeditable/default.html

An example usage is like this:

$(".edit_area").editable("http://www.example.com/save.php", { 
         type      : 'textarea',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

The problem is, it doesn’t support password input types, but here is how to add this support.

1 - Open the plugin file.
2 - Find this code:

text: { 
	element:function(settings,original) {
		var input=$('<input>');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

3 - Add this after that:

password: { element:function(settings,original) {
		var input=$('<input type="password">');
		if(settings.width!='none') {
			input.width(settings.width);
		}
		if(settings.height!='none') {
			input.height(settings.height);
		}
		input.attr('autocomplete','off');
		$(this).append(input);
		return(input);
	}
},

Now you can do:

$(".edit_area").editable("http://www.example.com/save.php", { 
         type      : 'password',
         cancel    : 'Cancel',
         submit    : 'OK',
         indicator : "<img src='img/indicator.gif'>",
         tooltip   : 'Click to edit...'
     });

It’s odd that the developers didn’t add this capability…

3 Comments for Password Support for Jeditable, a Cool jQuery Plugin

  1. Mika Tuupola said,

    September 1, 2008 @ 3:23 pm

    You don’t actually need to edit original Jeditable code. It has support for pluggable input types. You can just call:

    $.editable.addInputType(’password’, { … });

    Better explanation and example here:

    http://www.appelsiini.net/2007/8/custom-input-types
    http://www.appelsiini.net/2008/4/autogrow-textarea-for-jeditable

    But anyway good point about password type. I just never needed it myself. That is why it has not been added.

  2. Codehead said,

    September 1, 2008 @ 3:41 pm

    Thanks for the info, so are you going to add the it to the plugin?

  3. jEditable and password input type support said,

    September 1, 2008 @ 3:59 pm

    [...] wrote a post earlier about how jEditable (a jQuery) plugin needed password support and the author of the plugin [...]

RSS comments feed· TrackBack URI Password Support for Jeditable, a Cool jQuery Plugin

Leave a Comment for Password Support for Jeditable, a Cool jQuery Plugin