How to get jeditable and autosizeInput width to use the correct css styling

In a previous post, I showed how to get the jquery libraries jeditable and jquery.autosize.input (autosizeInput) to work together.

 jeditable - https://github.com/tuupola/jquery_jeditable
autosizeInput - https://github.com/MartinF/jQuery.Autosize.Input

After implementation, i decided to change the font used in my css from a serif to a monospaced font type and discovered that autosizeInput was incorrectly calculating the width size based on the serif font size. Looking at the code, I discovered that my custom autosizeInput type creates a input element but that element is not attached to the DOM. In other words, the input element does not inherit the styling from css.

To fix this, i added a line that attaches the created input element to the DOM:

$.editable.addInputType('autosize', {
    element : function(settings, original) {
        /* Create an input. Mask it using autosizeInput plugin. Settings  */
        /* for mask can be passed with Jeditable settings hash.          */

        var input = $('<input />');
        input.appendTo('body');

        input.autosizeInput();
        if (settings.width  != 'none') { input.width(settings.width);  }
        if (settings.height != 'none') { input.height(settings.height); }
        $(this).append(input);
        return(input);
    }
});

How to get rubaxa Sortable and jeditable to work together

One of the problems I was having was how to get the rubaxa sortable library and jeditable library to work together.  In the end, searching on google only lead to disappointment as the existing answers only referenced a different sortable library (jquery-ui). 

Here's how I got rubaxa sortable and jeditable to work together.

    disableSortable = function(settings, self) {
        sortable.option('disabled', true);
    };

    enableSortable = function(settings, self) {
        sortable.option('disabled', false);
    };

     $(document).ready(function()
     {$('.edit').each(function()
        {$(this).editable('/present/edit',
            {
                event: 'dblclick',
                onblur: 'submit',
                onedit : disableSortable,
                onsubmit: enableSortable,
                onrevert: enableSortable

            });
        });
     });

how to get jeditable to work with autosizeInput

I've been writing a flask todo program (jaychou.pythonanywhere.com) and have had to deal alot with jquery lately. This has been my first experience really diving into javascript and jquery so it's been a good learning experience.

One of the things i wanted was to have editable autosizing fields. Using the jeditable library, i was able to edit text and using the autosizeInput library, i was able to autosize the input tags. The problem was there was no good examples of how to integrate the two. So, here it is below.

How to get Jeditable to work with autosizeInput for input html tags


jeditable: https://github.com/tuupola/jquery_jeditable
autosizeInput: https://github.com/MartinF/jQuery.Autosize.Input


//jeditable

    $.editable.addInputType('autosize', {
        element : function(settings, original) {
            /* Create an input. Mask it using autosizeInput plugin. Settings  */
            /* for mask can be passed with Jeditable settings hash.          */

            var input = $('<input />').autosizeInput();
            if (settings.width  != 'none') { input.width(settings.width);  }
            if (settings.height != 'none') { input.height(settings.height); }
            $(this).append(input);
            return(input);
        }
    });

     $(document).ready(function()
     {$('.edit').each(function()
        {$(this).editable('/present/edit',
            {
                type: 'autosize',
                event: 'dblclick',
                onblur: 'submit',
                width: $(this).width()+30+'px',
            });
        });
     });