Tag Archives: jQuery plugin

jQuery Inline Editor plugin (source code)

Yesterday I talked about the inline editing paradigm that we are using for WebCenter 6. I have upgraded the plugin to follow the best practices for authoring a jQuery plugin.  The plugin now takes in methods and options.  I have exposed the methods “edit”, “cancel”, and “destroy” to allow for calling the edit and cancel functionality from outside the core function.  My next step will be to call the inline editing from within unobtrusive ajax onsuccess methods which I talked about before.

/*!
 * jQuery Inline Editor
 * Copyright 2011, Andrew Cohen https://omegaluz.wordpress.com
 */

(function ($) {

    var getSettingsElements = function (settings, context) {
        var display = $(settings.display, context);
        var edit = $(settings.edit, context);
        var editlink = $(settings.editlink, context);
        var cancellink = $(settings.cancellink, context);
        return {
            display: display,
            edit: edit,
            editlink: editlink,
            cancellink: cancellink
        };
    }

    /// <param name="$" type="jQuery">jQuery Object</param>
    var methods = {
        init: function (options) {

            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor'), // retrieve the settings that were previously stored
                     events,
                     settings;

                // If the plugin hasn't been initialized yet
                if (!data) {

                    var defaults = {
                        display: '[data-inlineeditor-display]',
                        edit: '[data-inlineeditor-edit]',
                        editlink: '[data-inlineeditor-editlink]',
                        cancellink: '[data-inlineeditor-cancellink]'
                    };

                    settings = $.extend(defaults, options);

                    events = {
                        editClick: function (e) {
                            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
                            e.preventDefault();

                            var $settings = getSettingsElements(settings, $this);
                            $settings.display.add($settings.editlink).hide();
                            $settings.edit.add($settings.cancellink).show();
                        },
                        cancelClick: function (e) {
                            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
                            e.preventDefault();

                            var $settings = getSettingsElements(settings, $this);
                            $settings.edit.add($settings.cancellink).hide();

                            var $form = $this.find('form');
                            $.validator.unobtrusive.parse($form);
                            if ($form.length > 0) {
                                var validator = $form.data('validator'); // get the jQuery.validate validator object for the form
                                if (validator) {
                                    validator.resetForm(); // reset the form using the validator
                                } else {
                                    $form[0].reset(); // reset using the form's built-in reset function
                                }
                            }

                            $settings.display.add($settings.editlink).show();
                        }
                    };
                    data = {
                        settings: settings,
                        events: events
                    };
                    // save the settings in the data
                    $(this).data('inlineeditor', data);

                } else {
                    settings = data.settings;
                    events = data.events;
                }

                // hide both the edit elements and the cancel link
                var $settings = getSettingsElements(settings, $this);
                $settings.edit.add($settings.cancellink).hide();

                // wire up the events
                $this.on('click.inlineeditor', settings.editlink, events.editClick);
                $this.on('click.inlineeditor', settings.cancellink, events.cancelClick);

            });
        },
        destroy: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    $this.off('.inlineeditor');
                    $this.removeData('inlineeditor');
                }

            })
        },
        edit: function () {
            return this.each(function () {

                var $this = $(this),
                    data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.editlink.trigger('click');
                }

            })
        },
        cancel: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.cancellink.trigger('click');
                }

            })
        },
        close: function (context) {
            return this.each(function () {

                var $this = $(this),
                    data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.edit.add($settings.cancellink).hide();
                    $settings.display.add($settings.editlink).show();
                }
            })
        },
        closeWhenValid: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var $form = $this.find('form');
                    $.validator.unobtrusive.parse($form);
                    if ($form.length > 0) {
                        if ($form.find('.input-validation-error').length == 0) {
                            methods.close.apply($this, arguments);
                        }
                    }
                }

            })
        }
    };

    $.extend($.fn, {
        inlineeditor: function (method) {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.inlineeditor');
            }
        }
    });

} (window.jQuery));