I have two windows, in one the data is written from the php script using ajax as a string. In the second user enters the data. I implemented using the jquery extension http://www.jacklmoore.com/autosize animated autoresize textarea that works correctly. Everything works clearly if you manually enter data between the tags: <textarea>ВВОДИМ СЮДА</textarea> . But if these fields are updated by ajax, then no resizing occurs. The jquery version is 1.8.1, or the version of autosize.js is v1.18.1. Fragments page codes

 <script> function show() { $.ajax({ type: "POST", url: "myscipt.php", cache: false, data: 'mydata=data&mykey=<?php echo $_SESSION['mykey']; ?>', success: function (response) { $("textarea#read").val(response); } }); } $(document).ready(function(){ show(); setInterval('show()',3000); }); $(function(){ $('.normal').autosize(); $('.animated').autosize({append: "\n"}); }); </script>

The field itself that needs to be resized: <textarea cols rows readonly id="read" class='form-control textareasyncget animated' placeholder='mytext' type='text' name='readdata'></textarea><br>

And the second field, which is resized without any problems when manually entering text by the user: <textarea class="form-control form_textarea animated" name="dataforwrite" placeholder="mytext2" id="dataforwrite" pattern=".{5,65535}" required title="5 to 65535 characters"></textarea>

Actually, the first is resized, if you remove readonly and write text there manually. It is necessary to make so that at ajax request the field itself expanded vertically, with animation. I tried to generate through echo in pkhp script the entire textarea field with the entered value (from the script variable) and output it via ajax as html code. But it also does not resize. Please tell me, I will be grateful. Yes, in javascript I am zero. Never worked with him, but the problem needs to be solved.

    1 answer 1

    Found a temporary solution without beautiful animation. Create a style:

     .mytextarea { padding : 20px 10px 10px 35px;background : #DEDEDE; border-top : 2px solid #cccccc; border-right : 2px solid #cccccc; border-bottom : 2px solid #cccccc; border-left : 2px solid #cccccc; border-radius: 5px; размер рамки -moz-border-radius: 5px; -webkit-border-radius: 5px; }

    Then everything is as above, but instead of <textarea> we <div class='mytextarea' id='read'></div> and we get a mold that looks like it was intended. This is suitable as a temporary solution until the issue with the animated <textarea> blocks in question is resolved.