I am using cropperJS, jquery and php to upload cropped images. The problem I am facing is that when the upload completes and the modal closes by itself, the display picture on page doesn't change unless I refresh the page. I want the image upload page that has modal on it, to be refreshed after upload. How can I implement this

Here is the jQuery code

$('#crop').click(function(){
        canvas = cropper.getCroppedCanvas({
            width:300,
            height:300
        });

        canvas.toBlob(function(blob){
            url = URL.createObjectURL(blob);
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function(){
                var base64data = reader.result;
                $.ajax({
                    url:'display_upload.php',
                    method:'POST',
                    data:{image:base64data},
                    success:function(data)
                    {
                        $modal.modal('hide');
                        $('#uploaded_image').attr('src', data);
                    }
                });
            };
        });
    });

And Here is the PHP & mySQL Code

<?php
$query = "UPDATE users SET display_pic = '$image_name' WHERE email = '$email'";
$data = mysqli_query($connec,$query); 
}

// If upload completes refresh the page | Can use PHP Header Location Too
if($data)
{      
    echo('<meta http-equiv="refresh" content="1; URL=profile.php?message=success"> ');
}
else {
    echo('<script> alert("Failed");</script>');
}
?>

CodePudding user response：

//why dont u echo a script to reload the page instead ?

<?php
$query = "UPDATE users SET display_pic = '$image_name' WHERE email = '$email'";
$data = mysqli_query($connec,$query); 
}

// If upload completes refresh the page | Can use PHP Header Location Too
if($data)
{      
    echo('<script> location.reload() </script>');
}
else {
    echo('<script> alert("Failed");</script>');
}
?>