1

Here I am using the croppie.js to upload an image for user. All are working perfectly but the problem is, the modal is only open when it is in debug window. When it is closed, the modal doesn't open.

Here is the HTML.

         <div class="row">
            <div class="col-md-12">
               <div id="user_data">

               </div>
            </div>  
         </div>

        <!-- crop image model  -->
        <div id="uploadimageModal" class="modal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Upload & Crop Image</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-8 text-center">
                                <div id="image_demo" style="width:350px; margin-top:30px"></div>
                            </div>
                            <div class="col-md-4" style="padding-top:30px;">
                                <br />
                                <br />
                                <br />
                                <button class="btn btn-success crop_image">Crop & Upload Image</button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

Below is the Ajax query

            load_data();
            function load_data() {
                $.ajax({
                    url: "adminquery/fetch/fetch.php", // Url to which the request is send
                    type: "POST",             // Type of request to be send, called as method

                    success: function (data) {
                        $('#user_data').html(data);

                    }

                });

            }

            // crop image
            $(document).ready(function () {
                $image_crop = $('#image_demo').croppie({
                    enableExif: true,
                    viewport: {
                        width: 150,
                        height: 150,
                        type: 'square' //circle
                    },
                    boundary: {
                        width: 300,
                        height: 300
                    }

                });

                $('#upload_image').on('change', function () {
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        $image_crop.croppie('bind', {
                            url: event.target.result
                        }).then(function () {
                            console.log('jQuery bind complete');
                        });
                    }
                    reader.readAsDataURL(this.files[0]);
                    $('#uploadimageModal').modal('show');
                });

                $('.crop_image').click(function (event) {
                    $image_crop.croppie('result', {
                        type: 'canvas',
                        size: 'viewport'
                    }).then(function (response) {
                        $.ajax({
                            url: "profile/profilepic.php",
                            type: "POST",
                            data: { "image": response },
                            success: function (data) {
                                $('#uploadimageModal').modal('hide');
                                $('#uploaded_image').html(data);

                                load_data();

                            }
                        });
                    })

                });
            });  

I am very grateful if someone help me. Thanks in advance.

Barmar
  • 741,623
  • 53
  • 500
  • 612
Nasik
  • 27
  • 6

0 Answers0