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',
            });
        });
     });