How To Use jEditable With Custom Field Types
erics, Posted May 15th, 2011 at 2:56:58pm
There are many GREAT jQuery plugins out there, written by brilliant people, and freely distributed as open source. I have simply taken a few of them and glued them together: jQuery, jEditable and showPassword.
MANY hours were spent putting all these parts together into a cohesive, functional unit, along with adding some enhanced error handling and a backend interface in JSON. My very small contribution to the effort is presented below:
The HTML:
|
1 2 3 4 5 |
<p id="name">Eric was here</p> <p id="email">eric@yzaerd.com</p> <p id="password"></p> <p><input id="checkbox" type="checkbox"> Show password</p> <p id="pwMsg" style="display: none"></p> |
The jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
var PWOpts = { cancel: 'Cancel', cssclass: 'editable', indicator: 'Saving...', onblur: 'ignore', submit: 'OK', tooltip: 'Click to edit...', type: 'password_input' }; //////////////////////////////////////////////////////// // Submit the form via AJAX and deal with the response //////////////////////////////////////////////////////// function submitEdit(Value, Settings) { var Input = this; var ID = this.id; var Orig = this.revert; jQuery.post('/account.json', { phase: 'user', mode: 'update', id: ID, value: Value }, function(data) { if (data.status === 0) { // Good if (ID == 'password') { jQuery('#password').empty().editable(submitEdit, PWOpts); jQuery('#pwMsg') .html('Saved!') .show() .delay(3000) .fadeOut(1000) ; } } else if (data.status === 999) { // Not Logged In SessionTimeout(); } else { // Error if (ID == 'password') { alert("Unable to update your password due to the following error:\n\n"+data.result); jQuery('#password').empty().editable(submitEdit, PWOpts); } else { alert("Setting back to original value " +Orig+" due to the following error:\n\n"+data.result); jQuery(Input).html(Orig); } } }, "json" ); return(Value); } jQuery(document).ready(function() { //////////////////////////////////////////////////////// // Create custom input classes for jEditable //////////////////////////////////////////////////////// jQuery.editable.addInputType('datepicker', { element: function(settings, original) { var input = jQuery('<input size="10" class="smooth" />'); // Catch the blur event on month change settings.onblur = function(e) { }; input.datepicker({ dateFormat: 'yy-mm-dd', showOn: 'both' }); input.datepicker('option', 'showAnim', 'slide'); jQuery(this).append(input); return (input); } }); jQuery.editable.addInputType('custom_input', { element : function(settings, original) { var input = jQuery('<input size="40" class="smooth"/>'); if (settings.width != 'none') { input.attr('width', settings.width); } if (settings.height != 'none') { input.attr('height', settings.height); } /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */ //input[0].setAttribute('autocomplete','off'); input.attr('autocomplete','off'); jQuery(this).append(input); return(input); } }); jQuery.editable.addInputType('password_input', { element : function(settings, original) { var input = jQuery('<input size="40" type="password" class="smooth"/>'); if (settings.width != 'none') { input.attr('width', settings.width); } if (settings.height != 'none') { input.attr('height', settings.height); } /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */ //input[0].setAttribute('autocomplete','off'); input.attr('autocomplete','off'); input.appendTo(jQuery(this)).showPassword({'checkbox':'#checkbox'}); return(input); } }); //////////////////////////////////////////////////////// // Finally, BIND jEditable to appropriate fields //////////////////////////////////////////////////////// jQuery('#name, #email') .editable( submitEdit, // call function above to process the form { cancel: 'Cancel', cssclass: 'editable', indicator: 'Saving...', onblur: 'ignore', submit: 'OK', tooltip: 'Click to edit...', type: 'custom_input' } ); jQuery('#password').empty().editable(submitEdit, PWOpts); }); |
Categories: How-To's, Technology datepicker, DateTimePicker, Hide password, How To, javascript, jEditable, JQuery, jQuery UI, Password, Show password, Tipes
Leave Your Comment
All fields marked with "*" are required.