1

I use croppie for editing pictures before uploading. The task is to destroy and init again this plugin without reloading the page.

So what I've already had:

$('#someID').croppie({
   viewport: {
      width: 128,
      height: 128
   }
});
$('#someID').croppie('bind', {
   url: 'some base64 encoded image'
});

After some operations - I hide the plugin:

$('#someID').toggle();
$('#someID').croppie('bind');

After all there are cases when I need croppie again and first part of js code works again, so I have in console:

croppie.min.js:1 Uncaught Error: Croppie: Can't initialize croppie more than once

And obviously I just hafta check initialized plugin for current element now or not. What I found:

// it supposed to be the answer, however it doesn't work correctly for me.    
if (!jQuery().fn.croppie) {

       $('#someID').croppie({
           viewport: {
                width: 128,
                height: 128
           }
       });

    }

this answer - and it always true ('cause of it's included library and it returns function) and I can't check this way; this one the same issue.

So, how to make sure that plugin initialized now or not?

P.S. It could be croppie or any other plugin. Thank you!

Salman S
  • 47
  • 1
  • 15
Jarvis
  • 384
  • 2
  • 6
  • 18

3 Answers3

0

Instead of if (!jQuery().fn.croppie), check with if(!$('#someID').data('croppie'))

if(!$('#someID').data('croppie'))
{
 $('#someID').croppie({
       viewport: {
            width: 128,
            height: 128
       }
   });

}
Iman Sedighi
  • 7,624
  • 4
  • 48
  • 55
  • I don't think croppie add such data attribute, may be update your answer to check for class which croppie add? if(jQuery('.cropimagecontainer').hasClass('croppie-container')) // destroy croppie ] – Den Pat Jan 30 '20 at 05:37
0

In croppie.js only comment the condition at line 1487

if (element.className.indexOf('croppie-container') > -1){
  throw new Error("Croppie: Can't initialize croppie more than once");
}
pavan sharma
  • 3
  • 2
0

This works for me!!

if(!$('#someID').hasClass('croppie-container')){
    $ImageCrop = $('#someID').croppie({
        enableExif: true,
        viewport: viewportval,
        boundary: boundaryval
    });        
}
user19732795
  • 1
  • 1
  • Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Aug 13 '22 at 09:19