Jquery .html обновляет дом, но иногда не отображается на экране?

Question

У меня есть текстовое поле в форме, содержимое которого устанавливается функцией jquery. Я использую одну и ту же функцию для нескольких текстовых полей. В некоторых случаях он работает отлично, хотя кажется, что в первом случае он обновляет DOM, поэтому, когда я проверяю его, я вижу, что содержимое текстового поля изменилось, хотя на экране оно отображается пустым?

, поэтому первый экземпляр выглядит так:

<div class='form-group director1'>
   <label class='col-sm-2 control-label'>Company Address</label>
   <div class="col-sm-6"><textarea id="a1-companyaddress" class='form-control' name="a1-companyaddress" rows="5" cols="40" style="overflow-y: scroll;">&nbsp;</textarea></div>                              
</div>  

а второй выглядит так:

<div class='form-group director2'>
  <label class='col-sm-2 control-label'>Company Address</label>
  <div class="col-sm-6"><textarea id='a2-companyaddress' class='form-control' name='a2-companyaddress' rows="5" cols="40" style="overflow-y: scroll;"></textarea></div>                             
</div>

код, запускающий обновление, находится на кнопке следующим образом:

$('.companysearch').click(function() {
  $('#loading').show();
  var prefix = $(this).attr('title');
  $.ajax({
    async: false,
    url: 'chouseapi.php',
    type: 'POST',
    data: {
      typ: 'fetchcompanydetails',
      company: $('#' + prefix + '-companynumber').val()
    },
    success: function(data) {
      var bits = data.split('~');
      var cno = $('#' + prefix + '-companynumber').val();
      $('#' + prefix + '-resetsearch').hide();
      $('#' + prefix + '-companyname').val('').show();
      $('#' + prefix + '-companynumberselect').hide();
      $('#' + prefix + '-companysearchbyname').show();

      $('#' + prefix + '-companyname').val(bits[0]);
      $('#' + prefix + '-companyincorporation').val(bits[1]);
      $('#' + prefix + '-companyaddress').html(bits[2]);
      $('#' + prefix + '-companysic').val(bits[3]);
      $('#' + prefix + '-companynumber').val(bits[4]);
      $('#' + prefix + '-companydata').html(bits[5]);
      $('#loading').hide();
    }
  });
});

для префикса a1 все входные данные изменяются, кроме текстового поля, для префикса a2 это прекрасно. Идентификаторы полей уникальны на странице. почему это происходит?

Answer 1

Во-первых, удалите async: false из настроек вашего AJAX-вызова. Это невероятно плохая практика. Если вы осмотрите консоль, вы даже увидите, что сам браузер говорит вам не делать этого.

Что касается вашей проблемы, вы должны использовать val() для обновления значения textarea, а не html():

$('#' + prefix + '-companyaddress').text(bits[2]);

Я также настоятельно рекомендую вам ознакомиться с методами обхода DOM. Таким образом, вы можете опустить ненужные добавочные атрибуты id в HTML и избавиться от уродливой конкатенации '#' + prefix + '-X' в вашем JS

.