обновить модальное окно, не закрывая его - PullRequest
Новая
       12

обновить модальное окно, не закрывая его

1 голос
/ 21 марта 2019

У меня есть эскизы изображений в сотнях каталогов.Я использую PHP для получения изображений.При нажатии на кнопку появляется окно начальной загрузки с идентификатором #imagePalette и отображаются все изображения в каталоге.

В javascript 

$.post('getCroppedImages.php',{'location': location, 'brand':brand},function(data) {
var imagemodal = $('#imagePalette');
imagemodal.find('.modal-title').html('Brand: ' + brand + ' in ' + location);
imagemodal.find('.modal-body').html(data).show();
});

PHP-код, который получает изображения: 

$path = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($path);
for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $imgname = basename($num);
    $img = $path . $imgname;
    $filnam = substr($filname, -9,9);
    $filnam = rtrim($filnam);
    echo '<ul class="croppeditem" id="croppeditem">';
    echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</li></ul>';

}

Приведенный выше код работает отлично.Он отображает изображения.У меня есть функция clickCroppedImage, прикрепленная к каждому изображению.Когда пользователь нажимает на изображение в модальном окне, эта функция запускает другой php, который deletes изображение из папки.

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

В Javascript 

$.post('deleteAnnCroppedImage.php', {'folder':wd, 'matchLst':matchLst, "imgPath" : clickedImg, 'currentAnnotCheckLocation': currentAnnotCheckLocation, 'currentAnnotCheckBrand': currentAnnotCheckBrand}, function(data){
          //imagemodal.find('.modal-body').html().show();
          var imagemodal = $('#imagePalette');
          imagemodal.find('.modal-body').html("");
          imagemodal.find('.modal-body').html(data).show();

        });

PHP Code 

$currentAnnotPath = "projects/" . $database . '/' . $match . '/' . $location . '/' . $brandname . '/*.jpg';
$files = glob($currentAnnotPath);
$imgPath = $_POST['imgPath'];
unlink($imgPath);
//echo "Deleted Image";

for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $imgname = basename($num);
    $img = $currentAnnotPath . $imgname;
    $filnam = substr($filname, -9,9);
    $filnam = rtrim($filnam);
    echo '<ul class="croppeditem" id="croppeditem">';
    echo '<li style="list-style:none;cursor:pointer" ><img onclick="clickCroppedImage(this.id); return false"; src="'.$num.'" id="'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</li></ul>';    
}

Скрипты php правильно возвращают данные, которые я могу вывести на консоль.Однако я не могу обновить модальное тело и отобразить возвращенные изображения.Я пробовал разные комбинации, но модальное окно не показывает никакой реакции.

Как очистить модальное тело и перезагрузить изображения, не закрывая модальное окно?

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Вы должны быть в состоянии достичь элемента модального тела. Прежде всего убедитесь, что вы можете видеть его из текущей области действия функции.

Примеры кодов, которые работают с базовым модом начальной загрузки:

Чистый JS: 

document.getElementsByClassName('modal-body')[0].innerHTML = '<p>some html</p>';

JQuery: 

$('#imagePalette .modal-body:first').html('<p>some html</p>');

Если iFrame есть, а модальное находится внутри, то сначала вы должны попасть в документ iFrame из JavaScript.

Другое: В этих случаях вы можете использовать оболочку jQuery вместо введения новой переменной. Вы не потеряете производительность, но это сделает этот код более читабельным.

0 голосов
/ 21 марта 2019

Вам придется использовать AJAX, если я правильно понял вашу проблему.После того, как пользователь удалил изображение, вы должны вызвать AJAX-запрос и изменить содержание модального сообщения.

Хорошее введение в AJAX можно найти через google.

С уважением

...