I'm sure the code is correct but not working? Javascript, Croppie JS, PHP, jQuery

Question

I'm having some serious trouble with this piece of Croppie.JS Code.

It runs on the Croppie.JS demo. Calling the croppie plugin through a variable is working and reporting an object inside the parentheses.

However when I try to link it up to the rotation button, nothing rotates.

I can rotate it using the orientation setting in the bind function however this only seems to be accessible if I also refresh the whole page at the same time?

I'm hoping someone can help me out here, I'm in quite a mess.

I'm just looking to make it so that when you upload a picture, you can rotate it before you submit it without refreshing the page every time (because refreshing the page was also rotating the image?!)

//Code:

 <button class="vanilla-rotate" data-deg="-90">Rotate</button>

      var croppieBox = $('#main-cropper').croppie({
        viewport: { width: 300, height: 300 },
        boundary: { width: 320, height: 320 },
        enableOrientation: true,

        update: function (data) {



         var coords = $('#main-cropper').croppie('get');

         //alert ( JSON.stringify(coords, null, 4) );

         //for data use
         var pointA = coords.points[0];
         var pointB = coords.points[1];
         var pointC = coords.points[2];
         var pointD = coords.points[3];
         var zoom = coords.zoom;

         var croppieGet = $('#main-cropper').croppie('result', {
            type: "canvas", 

            format: <?php echo $file_ext;?>



         }).then(function (img) {
         document.getElementById("javascript_image_base64").value = img;
         });

        }         
    //Close the first part of Croppie
    });

     croppieBox.croppie('bind', {
      url: <?php echo "'".$croppy_image_path."'"; ?>,
     });

        //.vanilla-rotate is the HTML button
    $('.vanilla-rotate').on('click', function(ev) {
        //vanilla is the new croppie instance, croppieBox
       var croppieBox = $('#main-cropper');


         //This line seems to be causing the problem???
        $croppieBox.croppie('rotate', parseInt($(this).data('deg')));



    });





   // get cropped image data
   // get zoom data
   // get crop points data

   //send it to php



   </script>

Answer 1

Thanks to Gulshan and ADyson the code is now working. Thank you both, your help is much appreciated. You can see what you helped to build here at https://www.thejobswhale.com

If you are happy, I'll add you both to the credits list.

//Updated, working code is

 <script>

  //Check when window is resized. If it crosses the boundary for mobile,
  //remove the zoomer from the croppie plugin.
  //If it crosses it the other way, add the zoomer back in.

    var croppieBox = $('#main-cropper').croppie({
        viewport: { width: 300, height: 300 },
        boundary: { width: 320, height: 320 },
        enableOrientation: true,

        update: function (data) {



         var coords = $('#main-cropper').croppie('get');

         //alert ( JSON.stringify(coords, null, 4) );

         //for data use
         var pointA = coords.points[0];
         var pointB = coords.points[1];
         var pointC = coords.points[2];
         var pointD = coords.points[3];
         var zoom = coords.zoom;

         var croppieGet = $('#main-cropper').croppie('result', {
            type: "canvas", 

            format: '<?php echo $file_ext;?>'



         }).then(function (img) {
         document.getElementById("javascript_image_base64").value = img;
         });

        }         
    //Close the first part of Croppie
    });

     croppieBox.croppie('bind', {
      url: <?php echo "'".$croppy_image_path."'"; ?>,
     });

        //.vanilla-rotate is the HTML button
    $('.vanilla-rotate').on('click', function(ev) {
        //vanilla is the new croppie instance, croppieBox
       var croppieBox = $('#main-cropper');
        croppieBox.croppie('rotate', parseInt($(this).data('deg')));
    });





   // get cropped image data
   // get zoom data
   // get crop points data

   //send it to php



   </script>