AJAX не обновляет переменную правильно

Question

Я запускаю ajax-вызов, чтобы получить данные для заполнения поля выбора. Когда это поле изменяется, запускается другой ajax-вызов для заполнения следующего поля выбора. Это прекрасно работает, и при выборе элемента из 2-го блока он идеально заполняет два текстовых поля данными.

Однако, если вы делаете новый выбор без обновления страницы, 2-й блок выбора не заполняет текстовые поля.

Повторяет переменные: я создал переменную 'list' для просмотра дополнительныхданные, поступающие из ajax, чтобы доказать, что они поступают правильно.

При первом вызове ajax: первый эхо «list» показывает ожидаемое содержимое. Во втором эхо-списке «list» отображается ожидаемое содержимое.

При втором вызове Ajax: в первом эхо-списке «list» отображается ожидаемое содержимое. Во втором эхо-списке «list» отображается содержимое первого вызова.

Я пытался вызывать его в разное время, в обратном вызове done и callback всегда. Я попытался добавить элемент успеха вызова ajax и заставить этот вызов вызывать функцию с требуемым процессом, но все равно - он не обновляется.

        $('#customer').change(function() {
            var selected = $(this).children("option:selected").val();
            $.ajax({
                type: 'POST',
                url: '/support/incs/worker/worker.getinfo.php',
                data: {info: "names", id: selected},
                dataType: 'json',
                encode: true,
                beforeSend: function() {
                }
            })
            .done(function(data) {
                console.log(data);
                var list = data.additional;
                console.log(list);
                if(data.status == true) {
                    $('#name').html('<option disabled selected>Select a User</option>');
                    $('#name').append(data.payload);
                    $('#name').change(function() {
                        var nameid = $(this).val();
                        console.log(list);
                        $('#email').attr('placeholder', list[nameid]['email']);
                        $('#tel').attr('placeholder', list[nameid]['tel']);
                    })
                } else {

                }
            })
            .fail(function(data) {
                //console.log(data);
            })
            .always(function(data) {

            });
        })

Данные должны обновляться, поэтому, когдавыбор сделан, это обновляет текстовые поля соответственно. Однако, поскольку переменная списка не обновляется, код не может найти требуемый ключ массива в переменной 'list' и выдает ошибки.

Вывод на консоль:

[Echo of returned data]
{status: true, payload: "<option value="4">Finga Ninja</option>", additional: {…}}additional: {4: {…}}payload: "<option value="4">Finga Ninja</option>"status: true__proto__: Object

[First echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object

[Second echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object

[Echo of returned data]
{status: true, payload: "<option value="5">Slooty Bartfast</option>", additional: {…}}additional: {5: {…}}payload: "<option value="5">Slooty Bartfast</option>"status: true__proto__: Object

[First echo of list]
5: {…}}5: {email: "***@***.com", tel: "01202 456123"}__proto__: Object

[Second echo of list]
{4: {…}}4: {email: "***@***.com", tel: "01202 789456"}__proto__: Object
staff_home:283 Uncaught TypeError: Cannot read property 'email' of undefined
    at HTMLSelectElement.<anonymous> (staff_home:283)
    at HTMLSelectElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLSelectElement.v.handle (jquery-3.4.1.min.js:2)

ДобавленБлок HTML:

<div class="row">
    <div class="col-6">
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer" name="customer">
                <?php echo $sCustomerList; ?>
            </select>
        </div>
    </div>
    <div class="col-6">
        <div class="form-group">
            <label for="name">Name</label>
            <select class="form-control" id="name" name="name">
                <option disabled selected>Select a User</option>
            </select>
        </div>
    </div>
</div>
<div class="row">
     <div class="col-6">
         <div class="form-group">
             <label for="email">Email</label>
             <input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" disabled placeholder="">
         </div>
     </div>
     <div class="col-6">
         <div class="form-group">
             <label for="tel">Contact Number</label>
             <input type="tel" class="form-control" id="tel" name="tel" disabled placeholder="">
         </div>
     </div>
</div>

Answer 1

Мне кажется, проблема в следующем:

1. Вы выбираете клиента. js добавляет прослушиватель событий в #name select.
2. Вы выбираете имя. прослушиватель событий выполняется, предлагает электронную почту и тел.
3. Вы выбираете другого клиента. Затем к выбору #name добавляется новый прослушиватель событий. Предыдущий не удаляется .
4. Вы выбираете имя. Старый слушатель пытается прочитать его list (в вашем примере 4: { ... }, и через него получить доступ к новому идентификатору имени (5). Конечно, он возвращает undefined. Попыткасделано для доступа к свойствам undefined, которые вызывают необработанную ошибку - код js падает, а правильный код (новый прослушиватель событий) никогда не выполняется.

Это говорит о том, что вам нужноудалить ('off', в терминологии jQuery) старый прослушиватель событий при подключении нового. У вас есть несколько вариантов:

• Сохранить его в переменной и вызвать off() для него.
• Сохраните их в массиве, в случае (возможно) нескольких прослушивателей событий, и отключите их всех.

• самый простой способ: предположим, что у вас нет другого постоянного прослушивателя событийк событию #name change вы можете в jQuery отключить все обработчики change, указав elem.off('change'). См. документы .

  $('#customer').change(function() {
      var selected = $(this).children("option:selected").val();
      $.ajax({
          type: 'POST',
          url: '/support/incs/worker/worker.getinfo.php',
          data: {info: "names", id: selected},
          dataType: 'json',
          encode: true,
          beforeSend: function() {
          }
      })
      .done(function(data) {
          console.log(data);
          var list = data.additional;
          console.log(list);
          if(data.status == true) {
              $('#name').html('<option disabled selected>Select a User</option>');
              $('#name').append(data.payload)
                .off('change'); // must be before the call to 'change()', for not offing the new handler.
              $('#name').change(function() {
                  var nameid = $(this).val();
                  console.log(list);
                  $('#email').attr('placeholder', list[nameid]['email']);
                  $('#tel').attr('placeholder', list[nameid]['tel']);
              })
          } else {
  
          }
      })
      .fail(function(data) {
          //console.log(data);
      })
      .always(function(data) {
  
      });
  })