Изменить высоту текстовой области после ajax функции успеха - PullRequest
Новая
       12

Изменить высоту текстовой области после ajax функции успеха

0 голосов
/ 13 апреля 2020

В моем коде есть текстовая область, используемая для отображения сообщения, полученного от серверной части. И я хочу увеличить высоту автоматически, когда длина содержимого настолько велика, что появляется полоса прокрутки. вот мой код: 

$.ajax({
    type: 'POST',
    async: false,
    url: '/text_translation',
    data: JSON.stringify(data),
    success: function(returnStr) {
        $.each(returnStr,function(item, value) {
            returnString.html(returnString.html() + value + '\n');//show message
        });

        console.log(returnString.clientHeight);//undefined

        //if message too long, increase the height 
        if (returnString.clientHeight < returnString.scrollHeight) {
            returnString.css('height', 'auto').css('height', returnString.scrollHeight + (returnString.offsetHeight - returnString.clientHeight));    
        }

}

Сначала, поскольку ajax является асинхронным, я установил «asyn c» как «false», чтобы гарантировать, что изменение может быть выполнено после каждой функции, но это также не может работать. Я пытался напечатать clientHeight, он показывал "undefined", независимо от того, что asyn c было ложным или истинным. Разве установка false не означает, что оператор, который я вызываю, должен завершиться до того, как будет вызван следующий оператор в моей функции? Я был смущен результатом, который представлял собой конкретное c число, которое я думал.

И затем я попытался использовать функцию события «input», например: 

returnString.on('input',function() {
    if (this.clientHeight < thhis.scrollHeight) {
        $(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
    }
});

Ничего не изменилось.

Я должен сделать что-то не так, но я не знаю, где это. Пожалуйста, объясните мне причину, спасибо за ваш ответ.

1 Ответ

0 голосов
/ 13 апреля 2020

Посмотрите здесь , как asyn c работает с $. ajax, потому что вы используете обратный вызов успеха, я не думаю, что это влияет на работу вашего кода в этом сценарии .

Чтобы изменить размер текстовой области, я нашел этот ответ полезным и создал функцию, в которой вы передаете элемент textarea ниже. 

$("button").click(() => {

  let returnStr = "Test\n\nTest\n\nTest\n\nTest\n\nTest\n\nTest";

  $("textarea").val(returnStr);
  resizeTextareaHeight($("textarea")[0]);
});

function resizeTextareaHeight(textarea) {
  while ($(textarea).outerHeight() < textarea.scrollHeight + parseFloat($(textarea).css("borderTopWidth")) + parseFloat($(textarea).css("borderBottomWidth"))) {
    $(textarea).height($(textarea).height() + 1);
  };
}
textarea {
  overflow-y: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <button type="button">Pretend Ajax Call</button>
</div>
<div>


  <textarea></textarea>
</div>
...