刷新模态窗口而不关闭它

Question

我在 100 个目录中有图像缩略图。我正在使用 PHP 来检索图像。单击按钮会弹出一个 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 数据，我可以将其打印到控制台。但是，我无法刷新模态体并显示返回的图像。我尝试了不同的组合，但模态窗口没有显示任何反应。

如何在不关闭模态窗口的情况下清除模态体并重新加载图像？

Answer 1

如果我正确理解您的问题，您将不得不使用 AJAX。 用户删除图像后，您必须触发 AJAX 请求并更改模式的内容。

可以通过 google 找到 AJAX 的一个很好的介绍。

最好的问候

Answer 2

您应该能够到达 modal-body 元素。 首先确保您可以从当前函数范围内看到它。

使用基本引导模式的示例代码：

纯 JS：

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

jQuery:

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

如果有 iFrame 并且模态框在里面，那么您应该首先从 JavaScript 进入 iFrame 文档。

其他： 在这些情况下，您可以使用 jQuery 包装器而不是引入新变量。您不会降低性能，但它会使这段代码更具可读性。