How do i apply autosize for textareas created using JQuery ?

[kale99]

I have this snippet of code that creates a new table row with a few columns and a textarea field inside of it.

function Copy(tableid) {
        var newRow = $('#' + tableid + ' tbody tr').first().clone();
        //removes the 'hidden' attribute so it will be visible when added  to the table
        newRow.removeAttr("hidden");

        //add/append new row to the table
        $("#" + tableid + " tbody").append(newRow);

        //get row number which will be appended to the id of each control in this row
        //for example if this were  the second row then the id of the asset field would be something like asset_2.
        //note  that since there is already a hidden row in the table, we subtract 1 from the row number
        var rowNum = "_" + ($("#" + tableid + " tbody tr").length - 1);

        //loop through the input controls and add the new id value
        newRow.find("textarea").each(function () {

            // get id of the input control
            var ctrl = $(this).attr("name");

            //concatenate the row number to the id
            var newId = ctrl + rowNum;

            //assign new id to control
            $(this).attr("name", newId);
            $(this).attr("id", newId);

          

        });

when i run this autosize snippet it works fine for all the text areas that are already on the dom, however it doesnt work for ones created dynamically. Is there a way to call the autosize function in the above function and have it apply for the newly created textarea ?

`var ta = autosize($('textarea'));
    ta.style.display = 'none';
    autosize(ta);

    // Change layout
    ta.style.display = 'block';
   
    autosize.update(ta);`

I tried placing the autosize(this) inside of the copy fuction , but that did not work.

[jackmoore]

I tried placing the autosize(this) inside of the copy fuction , but that did not work.

I'm not sure what this references inside your Copy function, likely it's defaulting to the window object. However, jQuery's each() method will bind this to the DOM node its iterating over. Since you are selecting textarea elements only and iterating over them using each(), you should be able to use autosize(this) within your function that's being passed to each().

So, try changing this:

//loop through the input controls and add the new id value
newRow.find("textarea").each(function () {
    // get id of the input control
    var ctrl = $(this).attr("name");

    //concatenate the row number to the id
    var newId = ctrl + rowNum;

    //assign new id to control
    $(this).attr("name", newId);
    $(this).attr("id", newId);
});

To this:

//loop through the input controls and add the new id value
newRow.find("textarea").each(function () {
    // get id of the input control
    var ctrl = $(this).attr("name");

    //concatenate the row number to the id
    var newId = ctrl + rowNum;

    //assign new id to control
    $(this).attr("name", newId);
    $(this).attr("id", newId);

    autosize(this);
});

[kale99]

so that does in fact add the inline tags to the new text area, however the autosize doesn't seem to recognize it once created on the browser.

Please see attached

The autosize works for items already existing when the browser loads , and it works on the new table row when the browser refreshes, but it doesnt work during the browser instance as it is added.

[jackmoore]

@kale99 This looks like the original release of autosize (written in jQuery). I no longer support that / haven't committed anything on it in 6+ years. It continues to exist on the v1 branch for legacy users. The current version works in a different way, which may or may not work for your project, but it's the only version I'm supporting at this time.