图库重新加载Jquery

时间:2017-05-08 18:36:40

标签: php jquery html css

我正在为学术研究建立一个图像系统。就像Instagram一样。 可以上传图片。

我的问题是我删除图片后重新加载。我从网址中获取了我的信息,并在img-gallery.php创建了班级相册的对象。

    if(isset($_GET['id']))
    {
        $album_id = $_GET['id'];
    }
    else
    {
        $album_id = 0;
    }
    checkIfAlbumIdOk($album_id, $con);

    $album = new Album($album_id, $con);
    $user = new User($_SESSION['user'], $con);
    $album_creator = new User($album->getAutor(), $con);

    checkIfUserCanSeeAlbum($album, $user, $album_creator);

    $header_img_src = getHeaderImgSrc($album);

使用以下php语句显示图像:

<div class="alben_imgs_wrapper">

          <section id="photos">
            <?php
                $upload_folder = getGeneralUploadFolder();
                $albumname = str_replace(" ", "_", $album->getName());
                $img_nr = 1;


                foreach($album->getImages() as $image)
                {
                    $file_name = $image->getFileName();
                    $img = $upload_folder . "/$album_id - $albumname/$file_name";
                    if(file_exists($img))
                    {
            ?>

                <div class="img-container">
                    <img src="<?php echo $img; ?>" class="image image_horizontal">
                    <div class="image_overlay_menu">
                        <button class="my-own-button" id="img<?php echo $img_nr; ?>">
                            <i class="material-icons">more_horiz</i>
                        </button>
                        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="img<?php echo $img_nr ?>" data-id="<?php echo $image->getId(); ?>">
                            <li class="mdl-menu__item delete_image_btn">Aus Galerie entfernen</li>
                            <li class="mdl-menu__item">Bildinformationen bearbeiten</li>
                        </ul>
                      </div>
                    <div class="image_overlay">
                        <div class="image_overlay_content">
                                <?php echo $image->getTitle(); ?>
                        </div>
                    </div>
                </div>                  
            <?php
                        $img_nr ++;
                    }

                }
            ?>
        </section>

        </div> 

要删除图像,我使用jQuery触发click事件,并对$Post文件执行handle-image-delete.php

$('.delete_image_btn').click(function(){
        var img_id = $(this).parent().attr("data-id");
        //console.log(img_id);
        if(img_id != "")
        {
            $.post("handle_img_delete.php",
            {
                image_id: img_id
            },
            function (data) {
                if (data == 1)
                {
                    //Do my Reload
                }
                else 
                {
                    console.log("Delete failed");
                }

            });
        }
    });

如果php文件的响应为1,则删除图像成功。我现在的问题是重新加载IMAGE部分。我不想仅在ID为#photos的部分重新加载整个页面。

如何更改代码?我是否必须将显示代码存储在单独的文件中?我的意思是代码的这一部分?

<div class="img-container">
                <img src="<?php echo $img; ?>" class="image image_horizontal">
                <div class="image_overlay_menu">
                    <button class="my-own-button" id="img<?php echo $img_nr; ?>">
                        <i class="material-icons">more_horiz</i>
                    </button>
                    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="img<?php echo $img_nr ?>" data-id="<?php echo $image->getId(); ?>">
                        <li class="mdl-menu__item delete_image_btn">Aus Galerie entfernen</li>
                        <li class="mdl-menu__item">Bildinformationen bearbeiten</li>
                    </ul>
                  </div>
                <div class="image_overlay">
                    <div class="image_overlay_content">
                            <?php echo $image->getTitle(); ?>
                    </div>
                </div>
            </div> 

0 个答案:

没有答案