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。当用户在模式窗口中单击图像时，此功能将触发另一个deletes来自该文件夹的图像的php。

此删除操作也没有任何问题。我试图刷新模式模态而不关闭它，以便显示文件夹中的当前图像集。我已经编写了类似的php和javascript代码，并使用unlink从文件夹中删除了图像。

使用Java语言

$.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

您应该能够到达模态主体元素。首先，请确保您可以在当前功能范围内看到它。

与基本引导程序模式一起工作的示例代码：

纯JS：

pragma: no test

jQuery：

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

如果有一个iFrame且模态位于内部，则应首先从JavaScript进入iFrame文档。

其他：在这些情况下，您可以使用jQuery包装器来代替引入新变量。您不会失去性能，但是它将使此代码更具可读性。

刷新模式窗口而不关闭它

2 个答案: