CODEWITHSUNDEEP
jqueryhtmlautosize
morne
morne

Reputation: 4169

Autosize on dynamically created textarea

I am using autosize.js to generate auto expanding textareas on a report of mine.

It works great on loading of items, but I have a button to add a new line in the report and for all those newly created textareas the autosize is not applied.

initial setup.

    $( document ).ready(function() {
        $('textarea').each(function(index,textArea){
            $(textArea).removeAttr( "style" );
            $(textArea).removeAttr( "data-autosize-on" );
            autosize(textArea);
        });
    }

function that adds a new line to the report

    function addRowLines() {
        var div = document.createElement('div');
        div.className = 'row';
        div.innerHTML = "<div class='cell100'> <div class='table'> <div class='cell4 content label bordersRight borderBottom bordersLeft bedCol'><textarea id='bed' class='columnClass bedCol label ' name='bed'></textarea></div> <div class='cell12 content label bordersRight borderBottom'><textarea id='Dmg' class='textAreaInput columnClass' name='Dmg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Dg' class='textAreaInput columnClass' name='Dg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Resp' class='textAreaInput' name='Resp'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='CVS' class='textAreaInput' name='CVS'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Fluid' class='textAreaInput' name='Fluid'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Sepsis' class='textAreaInput' name='Sepsis'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> </div> </div>";
        document.getElementById('container').appendChild(div);
    }

Ive looked at the UPDATE method of autosize, but I could not get it to work.

Once you've assigned autosize to an element, you can manually trigger the resize event by using the 'autosize:update' event. Autosize has no way of knowing when a script has changed the value of a textarea element, or when the textarea element styles have changed, so this event would be used instruct autosize to resize the textarea.

var ta = document.querySelector('textarea');

autosize(ta);

ta.value = "Some new value";

// Dispatch a 'autosize:update' event to trigger a resize:
var evt = document.createEvent('Event');
evt.initEvent('autosize:update', true, false);
ta.dispatchEvent(evt);

Is ther something I can use in my addRowLines function to re-apply it to all text areas?

Upvotes: 0

Views: 570

Answers (1)

Always learning
Always learning

Reputation: 51

I think you just have to reapply the "autosize" function to the new textarea that wasn't in the DOM when you loaded the page. A simple not very efficient solution is the following:

    function addRowLines() {
        var div = document.createElement('div');
        div.className = 'row';
        div.innerHTML = "<div class='cell100'> <div class='table'> <div class='cell4 content label bordersRight borderBottom bordersLeft bedCol'><textarea id='bed' class='columnClass bedCol label ' name='bed'></textarea></div> <div class='cell12 content label bordersRight borderBottom'><textarea id='Dmg' class='textAreaInput columnClass' name='Dmg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Dg' class='textAreaInput columnClass' name='Dg'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Resp' class='textAreaInput' name='Resp'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='CVS' class='textAreaInput' name='CVS'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Fluid' class='textAreaInput' name='Fluid'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Sepsis' class='textAreaInput' name='Sepsis'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> <div class='cell12 label bordersRight borderBottom '><textarea id='Neuro' class='textAreaInput' name='Neuro'></textarea></div> </div> </div>";
        document.getElementById('container').appendChild(div);

        rerunAutosize();
    }


    function rerunAutosize(){
        $('textarea').each(function(index,textArea){
            $(textArea).removeAttr( "style" );
            $(textArea).removeAttr( "data-autosize-on" );
            autosize(textArea);
        });
    }

Upvotes: 1

Related Questions