jquery.maxlength.js doesn't apply to textarea in angularjs populated table

Question

I'm currently using the jquery.maxlength.js (1.0.5) plugin to manage various textareas that I have in a single page application which is using AngularJS (v.1) to populate the data. I need to apply the maxlength functionality to some textareas that are inside a table populated using ng-repeat. For all other textareas that sit outside of the tables, maxlength applies and works fine but for the textareas inside the table even though the class is on the field it never applies to it. I suspect that the jquery call fires before the asynchronous angular has had a chance to produce the tables so they literally don't exist at that point for the query to apply to. I thought I could remedy this by using an ng-init to make a call when the last item in the table has rendered but it doesn't appear to have any affect. How can I get maxlength to apply to all the textareas in the ng-repeat?

JS call for textareas not inside a table called at the end of the document ready function:

$(function(){
    /** Other Jquery code here, datepicker and modals, this code works **/
    $('textarea.MaxLength4000').maxlength({ maxCharacters: 4000 });
});

Angular JS function to call maxlength at end of table render:

$scope.ApplyMaxLength = function (length) {
    var name = 'textarea.MaxLengthIn' + length;
    $(name).maxlength({ maxCharacters: length, status: true });
};

The class name here is different so I could be certain which jquery call was applying.

Html Code:

<div class="row">
    <div class="panel panel-primary">
         <div class="panel-heading">
             <div class="panel-title">Features</div>
         </div>
         <div class="panel-body">
             <table summary="displays features" id="tblFeatures" class="table table-bordered table-striped table-condensed">
                  <tbody>
                       <tr>
                           <th>Type</th>
                           <th>Comments</th>
                       </tr>
                       <tr style="width: 100%;" ng-repeat="f in features track by f.Id">
                           <td><label id="lblFtype">{{ f.Type }}</label></td>
                           <td><textarea id="txtComments{{f.Id}}" ng-model="f.Comments" class="form-control MaxLengthIn4000" style="width: 40em;"></textarea></td>
                       </tr>
                       <tr ng-show="nofeature" ng-init="ApplyMaxLength(4000)">
                            <td>N/A</td><td>N/A</td><td></td>
                       </tr>
                  </tbody>
             </table>
       <div class="form-group">
            <label class="col-sm-3 control-label text-right">Other Features:</label>
            <div class="col-sm-8">
                 <textarea id="txtSpecialFeature" ng-model="of.otherFeatures" style="width: 40em; height: 4em;" class="form-control MaxLength4000"></textarea>
            </div>
       </div>
    </div>
 </div>

Satpal · Accepted Answer · 2017-01-25 12:27:35Z

1

Create a wrapper directive to apply maxlength to your element

//Define a directive
angular.module('myModule').directive('myMaxlength', function () {
    return {
        link: function (scope, element, attrs) {
            var maxlength = Number(attrs.myMaxlength);
            $(element).maxlength({ maxCharacters: maxlength, status: true });
        }
    };
});

Usage

<textarea my-maxlength="4000"></textarea>

answered Jan 25, 2017 at 12:27

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elaine K Over a year ago

Thank you, solved the problem exactly. I'll mark it as soon as it let's me.

Elaine K Over a year ago

Can I use this same directive to get a length count for the text that's in the textarea?

Collectives™ on Stack Overflow

jquery.maxlength.js doesn't apply to textarea in angularjs populated table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related