Jquery ajax - div background image not changing reuploads

Kelum
December 31, 2019
256 views
0 votes
2 Answers

I have the following HTML page.

<div class="profile-photo" id="profilephoto" style="background:url('data:image/png;base64,iVBORw0KGgoA') no-repeat 50% 50%;"></div>

Using jQuery, I try to replace this base 64 value which is “iVBORw0KGgoA” .

So once after successful profile picture upload, I’m trying to replace this preview with the newly uploaded image. This is working for the first upload but from the second time, re-uploading with different image is not replacing this image preview.

Using the following ajax call I’m taking new base 64 value and replacing it in its success call:

    $.ajax({
        type: "GET",
        url: '@Url.Action("GetProfilePictureValue", "Student")',
        data: { "StudentId": studentID },
        dataType: "json",
        success: function (newProfilePictureBase64Value)
        {
            $("#profilephoto").css('background', 'none');
            $('#profilephoto').css('background', 'url(data:image/png;base64,' + newProfilePictureBase64Value + ') no-repeat 50% 50%;');
            $("#profilephoto").load(location.href + " #profilephoto>*", "");

        },
        error: function ()
        {
            alert('Error occured');
        }
    });

Answers

Chosen as BEST ANSWER

found the culprit, its caching the ajax call, so taking the same value, so I put 'cache: false'

 $.ajax({
        type: "GET",
        url: '@Url.Action("GetProfilePictureValue", "Student")',
        data: { "StudentId": studentID },
        dataType: "json",
        cache: false,
        success: function (newProfilePictureBase64Value)
        {
            $("#profilephoto").css('background', 'none');
            $('#profilephoto').css('background', 'url(data:image/png;base64,' + newProfilePictureBase64Value + ') no-repeat 50% 50%;');
            $("#profilephoto").load(location.href + " #profilephoto>*", "");

        },
        error: function ()
        {
            alert('Error occured');
        }
    });