刷新模式窗口而不关闭它

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请求并更改模式的内容。

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

诚挚的问候

Answer 2

你应该能够到达模态体元素。首先，确保您可以从当前函数范围中看到它。

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

纯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包装器而不是引入一个新变量。您不会丢失性能，但它将使此代码更具可读性。