刷新模式窗口而不關閉它

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，該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包裝器來代替引入新變量。 您不會失去性能，但是它將使此代碼更具可讀性。