Question

I’m having difficulty getting my textarea to expand vertically automatically.

I have some code to help make textarea auto expand vertically and for some reason it works when I clean out all my JS and provide a selector with reference to textarea e.g. $('textarea').autoGrow();

Calling the plugin on a chain of methods stops it from working. E.G.

micropostBox.hide().removeClass("micropost_content")
.addClass("micropost_content_expanded").show().autoGrow();

I established the plugin code works so copied all my working code to the same page and applied the autoGrow code to my textarea but it seems to be unresponsive. I noticed that the plugin I’m using the code from uses bind and unbind methods. In my code I use on and off methods from JQuery and wondering if this could be why the auto resizing of my textarea is not working?

Here is the code:
http://jsfiddle.net/erU5J/101/

autogrow plugin js code

$(function($) {
    $.fn.autoGrow = function() {
        return this.each(function() {
            var txtArea = $(this);
            var colsDefault = txtArea.attr('cols');
            var rowsDefault = txtArea.attr('rows');

            var updateSize = function() {
                var linesCount = 0;
                var lines = txtArea.attr('value').split('\n');

                for (var i = lines.length - 1; i >= 0; --i) {
                    linesCount += Math.floor((lines[i].length / colsDefault) + 1);
                }

                if (linesCount >= rowsDefault) {
                    txtArea.attr('rows', linesCount + 1);
                }
                else {
                    txtArea.attr('rows', rowsDefault);
                }
            };
            txtArea.unbind('.autoGrow').bind('keyup.autoGrow', updateSize).bind('keydown.autoGrow', updateSize).bind('change.autoGrow', updateSize);
        });
    };
});

my js code

$(function() {

    $("div.microposts").on("focus", "textarea#micropostBox", function() {

        var micropostForm = $(this).parent(),
            micropostBox = micropostForm.find('textarea#micropostBox'),
            micropostButton = micropostForm.find("input#micropostButton"),
            xButton = micropostForm.find("div.xButton");


        micropostBox.prop('rows', 7);
        micropostForm.find('div#micropostOptions').removeClass('micropostExtraOptions');
        micropostForm.find('div#postOptions').show();
        $.trim(micropostBox.val()) == '' ? micropostButton.addClass("disabledMicropostButton").show()

        :

        micropostButton.prop('disabled', false);

        micropostBox.hide().removeClass("micropost_content").addClass("micropost_content_expanded").show().autoGrow();

        xButton.show();
        micropostButton.prop('disabled', true);


        micropostBox.off().on("keypress input change", function() {

            micropostButton.prop({
                disabled: !$.trim($(this).val()) != ''
            });

            $.trim($(this).val()) != '' ? micropostButton.removeClass("disabledMicropostButton").addClass("activeMicropostButton")

            :

            micropostButton.removeClass("activeMicropostButton").addClass("disabledMicropostButton");

        });

        xButton.on('click', function() {

            micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
            micropostForm.find('div#micropostOptions').addClass('micropostExtraOptions');
            micropostBox.val("");
            micropostForm.find('div#postOptions').hide();
            xButton.hide();
            micropostButton.hide();
            micropostBox.removeAttr('style');
            micropostBox.prop('rows', 0);
            micropostForm.find('.imagePreview > img').remove();
            micropostForm.find('.imagePreview').hide();

        });

    });

});





$(function() {

    $('div.microposts').on('click', 'li#addImage', function() {

        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');

        fileField.trigger('click');
    });

});

$(function() {

    $('input#micropost_image').change(function(evt) { //.off() make sautoresize work
        var image = evt.target.files[0],
            form = $(this).parents('form#new_micropost'),
            imagePreviewBox = form.find('div.imagePreview'),
            reader = new FileReader();

        reader.onload = function(evt) {
            var resultdata = evt.target.result,
                img = new Image();

            img.src = evt.target.result;
            imagePreviewBox.show().prepend(img);

        };

        reader.readAsDataURL(image);

    });
});​

textarea

 <textarea class="micropost_content" cols="40" id="micropostBox" name="micropost[content]" placeholder="" rows="0"></textarea>

It would be best to view a working example on jsfiddle. My aim is to have the auto resizing of textarea working before and after an image is added to the page using the image upload button in the textarea.

Kind regards

Answer 1

It depends if the method preceding the plugin call returned the jQuery object containing the elements to where the plugins need to be attached.

Here are a few examples of methods that do and do not return the elements you started with:

$('element')           //get an element
    .contents()        //get an elements contents
    .wrapAll('<div>')  //wrapAll contents with div and returns the contents, not wrapper
    .parent()          //the wrapper
    .parent()          //the element
    .myPlugin()        //we attach a plugin to element

$('<div>')
    .appendTo('body')  //appendTo returns the same element, the div
    .myPlugin()        //attaches to the div

$('element')           //get an element
    .text()            //get its text
    .myPlugin()        //chaining isn't possible since text() returns a string

Better read the docs for every method in jQuery and what it returns. Some DOM methods usually return the same element, some don’t, and some don’t return elements but values.

In summary, can plugins be attached after chains? YES, and it depends.