Question

我正在尝试将已更改的图像加载到带有ajax的模式框中。例如，当我单击“制作个人资料图片”时，照片将更改为所选的一个，但除非我刷新页面，否则它会保留旧的一个显示在模式框中。有没有办法让ajax不仅在页面加载时执行，而且可能总是执行以检查照片是否是新的？

以下是我的代码：

PHP -

public function getprofileimageAction()
{
    $layout = $this->layout();
    $layout->setTerminal(true);

    $view_model = new ViewModel();
    $view_model->setTerminal(true);

    $params = $this->identity();

    $dir = @array_diff(@scandir(getcwd() . '/public/images/profile/' . $params . '/current/', 1), array('.', '..'));

    if (!$dir) {
        // set default avatar
        $string_img = "<img src=\"/images/profile/defaults/avatar2.png\" class=\"w3-round w3-border\" onclick=\"document.getElementById('a-modal').style.display='block'\"
        style=\"width: 200px; height: 200px;\" alt=\"Avatar\" id=\"avatar\">";
    } else {
        $string_img = "<img src=\"/images/profile/$params/current/$dir[0]\" class=\"w3-round w3-border\" onclick=\"document.getElementById('a-modal').style.display='block'\"
        style=\"width: 200px; height: 200px;\" alt=\"Avatar\" id=\"avatar\">";
    }

    $data = array(
        'profile_photo' => $string_img
    );

    echo $data['profile_photo'];

    return $view_model;
}

JavaScript / jQuery -

 var replaced_src;
 var replace;

 $.ajax({
    type: "POST",
    url: "/members/profile/get-profile-image",
}).done(function(data) {
   $("#profile-pic").html(data);

   replaced_src = $("#avatar").attr('src');

   replace = replaced_src.replace(/(defaults)/g, '');

  // fix this so it loads the changed image.
  $('#current-photo').html("<img src='" + replace + "' alt='Avatar' class='w3-center w3-round w3-border' style='height: 280px; width: 400px;'>");


 }).fail(function(data) {
    alert("Error loading image");
});

这是事件点击更改个人资料图片

$('#make-profile-photo').on('click', function() {
    $.ajax({
        type: "POST",
        url: "/members/profile/change-profile-picture",
        data: { image: $('#other-photo').attr('src') }
}).done(function() {
    document.getElementById('p-modal').style.display = 'none';

    $('#profile-pic').load('/members/profile/get-profile-image');
});

}）;

HTML -

<div class="w3-modal" id="a-modal">
        <div class="w3-modal-content w3-card-4 w3-theme-d2 w3-round" style="width: 432px;">
            <div class="w3-container">
                <p class="w3-center w3-small">
                    <span onclick="document.getElementById('a-modal').style.display = 'none'" class="w3-closebtn">&times;</span>
                    Current Profile Picture
                </p>

                <br>

                <p id="current-photo" class="w3-center">
                <br>
                </p>

                <script type="text/javascript">
                    var modal = document.getElementById('a-modal');

                    window.onclick = function(event) {
                        if (event.target == modal) {
                            modal.style.display = 'none';
                        }
                    }
                </script>

                <div class="w3-clear"></div>
            </div>
        </div>
    </div>

所以基本上我要问的是，是否有办法重新加载已更改的图像，以便$('#current-photo')显示它而无需刷新页面。

希望有意义

谢谢！

如果有帮助，这是我的问题的截图：

http://imgur.com/a/DkPhQ

使Ajax调用执行多次

0 个答案: