Динамически добавлять / удалять элементы в сетке bootstrap, используя jQuery - PullRequest
Новая
       25

Динамически добавлять / удалять элементы в сетке bootstrap, используя jQuery

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

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

Ниже функции jquery, чтобы вывести галерею в div с помощью popup- класс галереи 

function getPictures(id) {
    $.ajax({
        dataType: 'json',
        type:'GET',
        url: `${controller_url}/collect_pictures/${id}`,
        beforeSend: function(){
            $(".loader").css("visibility", "visible");
        }
    }).done(function(data){ 
        $(".loader").css("visibility", "hidden");
        $('.pictures-buttons').show();
        $( ".popup-gallery" ).empty();
        if(data.pictures.length > 0) {
            for (var i = 0, j = data.pictures.length; i < j; i++){
                if(i==0 || i%4 == 0)
                {
                    var appendEl = $("<div class='row'></div>").appendTo(".popup-gallery");
                }
                $(`
                    <div class="col-lg-6 col-xl-3">
                        <div class="card">
                            <a href="${data.picture_path}${data.pictures[i].image}" data-source="">
                                <div class="img-responsive">
                                    <img src="${data.picture_path}${data.pictures[i].image}" alt="" class="card-img-top img-fluid">
                                </div>
                            </a>
                            <div class="card-body">
                                <h5 class="card-title">Filename: ${data.pictures[i].image}</h5>
                                <p class="card-text">Uploaded: ${data.pictures[i].uploadtime}</p>
                                <p class="card-text">File data: ${data.pictures[i].sizes} / ${data.pictures[i].filesize}</p>
                                <div class="button-list" data-id="${data.pictures[i].imgid}">
                                    <button type="button" class="btn btn-info waves-effect waves-light picture-button"><i class="mdi mdi-spotlight-beam mr-1"></i> Details</button>
                                    <button type="button" class="btn btn-warning waves-effect waves-light picture-button">Remove <i class="mdi mdi-trash-can ml-1"></i></button>
                                </div>
                            </div>
                        </div>
                    </div><!-- end col -->
                `).appendTo(appendEl);
            }
        }
        else
        {
            $( ".alert" ).html( "No pictures for the selected registration." );
        }
    });
}

Пока что я могу успешно удалить каждый элемент изображения, используя следующий код: 

$("body").on("click",".picture-button",function(e){
    var id = $(this).parents('div').data('id');
    if(id != null) {
        e.preventDefault();
        if($(this).find("i").hasClass("mdi-spotlight-beam")) {
            viewPicture(id);
        }
        if($(this).find("i").hasClass("mdi-trash-can")) {
            removePicture(id);
            $(this).parent().parent().parent().hide({
                duration:500
            });
        }
    }
});

Но у меня возникли проблемы, поскольку я хотел бы изменить сетку после элемент был удален .... прямо сейчас, если я удалю первое изображение, это пространство останется пустым. Любой совет, чтобы решить проблему?

То же самое, чтобы динамически добавить новый элемент после того, как пользователь загрузит новое изображение.

Большое спасибо за любую помощь.

1 Ответ

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

Проблема в том, что вы пишете фотографии в html и там просто их скрываете. Таким образом, вам нужно добавить массив, к которому вы направляете ответ ajax, тогда у вас есть возможность добавлять / удалять картинки и впоследствии изменять порядок представления.

Функции (псевдокод), которые вам понадобятся 

// modify the items array (push/remove/edit)
 myGallery.items.push({
      src: "some-image.jpg"
  });

 // call update method to refresh counters (if required)
 myGallery.updateItemHTML();
...