Home > Password Support for Jeditable, a Cool jQuery Plugin

Password Support for Jeditable, a Cool jQuery Plugin

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…

Filed under: AJAX, JavaScript, Web Development Posted by: Codehead

Got a Question?

Get answers here.

Follow me on Twitter.

3 Comments »

Mika Tuupola:

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.

Comment
Codehead:

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

Comment
jEditable and password input type support:

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

Pingback