CODEWITHSUNDEEP
javascriptjqueryajax
Hossein Karaji
Hossein Karaji

Reputation: 49

croppie plug-in does not work using ajax /innerHtml content

I'm using croppie plug-in but does not work when content is overwritten using ajax/php (result show with innerHtml). What I should doing? Please help me!

read more about croppie: https://foliotek.github.io/Croppie/

Content of data.php : Compilation of php and html code

<?php
if(isset($_POST['id']) && $_POST['id'] == 1){
?>
<div id="upload-demo" style="width:350px"></div>
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<?php
}
?>

My Codes:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>

<div id="div1"></div>

<button>Get External Content</button>
<script>
$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                    type: 'get',
                    url: 'php/data.php',
                    data: {
                            id: '1'
                    },
                    success: function(response) {
                            document.getElementById("div1").innerHTML = response;
                    }
            });
        });
});

$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#upload').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>

Upvotes: 1

Views: 252

Answers (1)

Mohammad
Mohammad

Reputation: 127

Your problem will be solved with the following code:

<script>
$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                    type: 'get',
                    url: 'php/data.php',
                    data: {
                            id: '1'
                    },
                    success: function(response) {
                            document.getElementById("div1").innerHTML = response;
                    }
            });
        });
});


var $uploadCrop;
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'circle'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$(document).on('change', '#upload', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $uploadCrop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });
    }
    reader.readAsDataURL(this.files[0]);
});
</script>

Upvotes: 1

Related Questions