You Are Here 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…

Password Support for Jeditable, a Cool jQuery Plugin
Filed under: AJAX,JavaScript,Web Development   Posted by: Hamid

3 Comments »

  1. 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

     
  2. Codehead:
     

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

    Comment

     
  3. 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

     

RSS feed for comments on this post. TrackBack URL

Leave a comment