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>

add single quote `'` before and after open and close `` tag. `eg: ''` — PHP Ninja, Dec 02 '19 at 11:57
Are there any script errors in your browser's Console? As Gulshan says, you seem to be trying to inject string values into the JS from PHP, but have forgotten to wrap the strings in quote marks, so JS wil try to interpret them as variable names or keywords. There's a good chance this is causing script errors which prevent the code from running. Fix those first and then see if you still have other problems. — ADyson, Dec 02 '19 at 11:58
Thanks for the help so far, I've added both of your ideas in to the edits to help fix it! — andyswebportfolio, Dec 02 '19 at 12:02

score 4 · Answer 1 · answered Dec 02 '19 at 12:09

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>

No problem to be credited, if you think it merits it, thankyou! P.S. I rolled back the edit to your question, because, if you add the solution to the _question_, then it no longer represents a problem, and the question no longer makes sense. You've done the right thing by adding the working code here as an Answer :-) — ADyson, Dec 02 '19 at 12:12
@aerotortoise thanks you for appreciation. as ADyson said _No problem to be credited_ we are here for help :) — PHP Ninja, Dec 02 '19 at 12:18

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

1 Answers1