Search code examples
javascriptphpjqueryajaxcropperjs

How to refresh current page after image successfully uploads and bootstrap model closes using cropperJS, jQuery and PHP?


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>');
}
?>

Solution

  • //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>');
    }
    ?>