Блог

У меня есть эскизы изображений в сотнях каталогов. Я использую PHP для извлечения изображений. При нажатии кнопки появляется окно bootstrap modal with id #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-код

 $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-Скрипты корректно возвращают данные ul li, которые я могу распечатать на консоли. Однако я не могу обновить модальное тело и отобразить возвращенные изображения. Я пробовал разные комбинации, но модальное окно не показывает никакой реакции.

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

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

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

С наилучшими пожеланиями

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

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

Чистый 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 вместо введения новой переменной. Вы не потеряете производительность, но это сделает этот код более читаемым.