Блог

Я делаю запрос AJAX для получения массива JSON, после успешного выполнения выполняется другой запрос AJAX, и содержимое заполняется в div модального загрузчика с помощью функции добавления jquery. Все работает правильно для первого выбора, однако, как только я закрываю модальный и пытаюсь выполнить другую запись, функция добавления больше не заполняет div. Я попытался очистить содержимое div, а также попробовал функцию clone, но независимо от того, что содержимое не будет повторно заполнено до обновления страницы. Я попытался войти в консоль, и данные верны и повторно заполняются при каждом нажатии. Извините, если мой код ужасен, все еще учусь. Ниже приведен код, который я использую. Любая помощь будет оценена.

      function makeModal({first_name, last_name, id}) {
                return `
                <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">${first_name} ${last_name}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">amp;times;</span>
                </button>
                </div>

                <div class="modal-body">
                <p>${last_name}</p>
                <p>${id}</p>
                <p id="job_history"></p>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
                </div>
                </div>
                </div>`;
          }

          //onclick event
      $(document).on('click', '.applicant_detail', function(e) {

        var id = $(this).data('id');
        //$('#job_history').empty();
         $('#myModal').modal('dispose');

        $.ajax({
              type: "POST",
              url: "/admin/get_applicant",
              dataType: 'json',
              data: {id:id},
              success: function(data) {

                    var count = Object.keys(data).length;

                    $.each(data, function(index, element) {
                          var m1 = $(makeModal({last_name:element.last_name, first_name:element.first_name, id:element.id})); 
                          document.body.insertAdjacentHTML('beforeend', m1);
                          m1.modal('show');
                    });
                          $.ajax({
                                type: "POST",
                                url: "/admin/get_job_history",
                                dataType: 'json',
                                data: {application_id:id},
                                success: function(data) {

                                     var count = Object.keys(data).length;

                                     $.each(data, function(index, element) {

                                      $('#job_history').append("Job Title: "   element.job_title   '<br>').clone();

                                      console.log('Job Title: '   element.job_title);
                                });
                               },   
                         });    
                    },
              });

  });
 

Я понимаю это. Мне нужно было уничтожить модал, созданный с помощью моей функции makeModal. Поэтому я удалял div с каждым событием click. Не уверен, что это лучший способ, но он работает.

 $('#myModal').remove();  //added this below the click event