Замораживание начальной загрузки в процессе создания из AJAX

Question

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

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

Метод AJAX строится следующим образом:

function getBody(body, key) {

    $.ajax({
        type: "POST",
        url: "casse.aspx/getBody",
        data: JSON.stringify({ key: key }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {

            data = r.d;
            data = $.parseJSON(data);

            $.each(data, function (i, item) {

                var piva = item.piva;
                var desmag = item.desmag;
                var via = item.via;
                var loc = item.loc;
                var servb2b = item.servb2b;
                var idtrabb2b = item.idtrabb2b;
                var matricola = item.matricola;
                var azzer = item.azzer;
                var mac = item.mac;
                var vp = item.vp;
                var vb = item.vb;
                var dr = item.dr;
                var vu = item.vu;
                var cpu = item.cpu;
                var rt = item.giart;
                var datart = item.avviort;

                var card = "";

                card += '<div class="row ml-2 mr-2">';
                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Cliente</span></div>';
                card += '<div class="row"><small class="text-muted">P.Iva</small></div>';
                card += '<div class="row"><p class="info">' + piva + '</p></div>';
                card += '<div class="row"><small class="text-muted">Info Negozio</small></div>';
                card += '<div class="row"><p class="info">' + desmag + '</p></div>';
                card += '<div class="row"><small class="text-muted">Via</small></div>';
                card += '<div class="row"><p class="info">' + via + '</p></div>';
                card += '<div class="row"><small class="text-muted">Localita</small></div>';
                card += '<div class="row"><p class="info">' + loc + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Software</span></div>';
                card += '<div class="row"><small class="text-muted">VisualPos</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vp + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualB2B</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + vb + '</a></div>';
                card += '<div class="row"><small class="text-muted">Driver</small></div>';
                card += '<div class="row"><a href="#" class="badge badge-warning">' + dr + '</a></div>';
                card += '<div class="row"><small class="text-muted">VisualUpdate</small></div>';
                card += '<div class="row"><p class="info">' + vu + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fiscale</span></div>';
                card += '<div class="row"><small class="text-muted">Matricola</small></div>';
                card += '<div class="row"><p class="info">' + matricola + '</p></div>';
                card += '<div class="row"><small class="text-muted">Azzeramento Fiscale</small></div>';
                card += '<div class="row"><p class="info">' + azzer + '</p></div>';
                card += '<div class="row"><small class="text-muted">RT</small></div>';
                card += '<div class="row"><p class="info">' + rt + '</p></div>';
                card += '<div class="row"><small class="text-muted">Data Avvio RT</small></div>';
                card += '<div class="row"><p class="info">' + datart + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Fatturazione Elettronica</span></div>';
                card += '<div class="row"><small class="text-muted">Servizio B2B</small></div>';
                card += '<div class="row"><p class="info">' + servb2b + '</p></div>';
                card += '<div class="row"><small class="text-muted">Trasmittente B2B</small></div>';
                card += '<div class="row"><p class="info">' + idtrabb2b + '</p></div></div>';

                card += '<div class="col">';
                card += '<div class="row"><span class="badge badge-primary">Hardware</span></div>';
                card += '<div class="row"><small class="text-muted">CPU</small></div>';
                card += '<div class="row"><p class="info">' + cpu + '</p></div>';
                card += '<div class="row"><small class="text-muted">MAC</small></div>';
                card += '<div class="row"><p class="info">' + mac + '</p></div></div></div>';

                $(body).find('.card-body').append(card);
            });

        },
        error: function (error) {
            OnFailure(error);
            alert('Error');
        }
    });
}

И вызывается при срабатывании соответствующего

$('.accordion').on('show.bs.collapse', function (e) {
    var id = $(e.target).attr('id');
    var item = '#' + $(e.target).attr('id');
    if ($(item).find('.card-body').is(':empty')) {
        getBody(item, id);
    } else {

    }

});

Answer 1

Вам потребуется вручную активировать переключатель после завершения загрузки данных и после помещения данных в DOM. Это означает, что вам нужно удалить значение data-target из Collapse и вручную добавить прослушиватель / обработчик событий. Хотелось бы, чтобы был аспект до / после коллапса, который вы могли бы подключить, но его нет.

Рассмотрим приведенный ниже пример, в котором нет задержки, с которой вы столкнулись.

$("#test-button").click(e => {
  $.ajax({
     url: "https://jsonplaceholder.typicode.com/todos",
     dataType: "json"
  }).done(d => {
    $("#collapseOne .card-body").text(JSON.stringify(d
, null, 4));
    $("#collapseOne").collapse("toggle");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button id="test-button" class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body"></div>
    </div>
  </div>
</div>