There is NO way to re-init cropit in a single page application (angular)

[jpodpro]

as far as i can tell, cropit ONLY works on first page load. navigating to another page that uses cropit again always fails. it tries to init cropit again and this never works. only the first load.

i've tried everything from destroy to removing all event listeners - nothing works. it simply breaks as soon as you try to initialize it again - even though the app has essentially loaded a fresh DOM and an empty cropit window.

something tells me cropit uses globals that stick around and get in the way of another cropit init attempt. is this true?

i guess the workaround would be to setup a global cropit instance and try to re-use it when i need it again. this is not ideal as i'm doing brand new cropping tasks and it makes the most sense to start from scratch. i also don't know how this is supposed to work when the cropit element gets removed from the DOM.

[asaf-yonay]

Weird - I've been able to using Jquery mobile when navigating from and to the page containing cropit.

Can you show us some examples of how you're transitioning between pages? ng-include? ng-switch?

Thanks.

[jpodpro]

after hours of chugging i figure it out. basically i was using a css trick to make the preview a responsive width square. this required it to be position:absolute.

for some reason it would load the image on the first time but any subsequent attempts to use it without refreshing rendered cropit completely unusable until i refreshed the page again. very strange indeed.

[sidaurukfreddy]

Hello dear sorry for comment in here, i have same issue like you i guess, already digging on it i can't make multiple preview with diffrent configuration in css, honestly why i cannot make multiple preview with this class cropit-image-preview cause in jquery.cropit.js line 927 the author define only for one images, so i copy and rename it, so ihave two js (jquery.cropit.js) and ( jquery.cropit-user.js) with diffrent class also

here is my html

,,,html

Resize image

Submit

Resize image

Submit

,,,

and this is my css

.cropit-image-preview {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 250px;
    height: 250px;
    cursor: move;
  }

   .cropit-image-preview-test {
    background-color: #f8f8f8;
    background-size: cover;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-top: 7px;
    width: 300px;
    height: 300px;
    cursor: move;
  }

and this is my js

$(function() {
        $('.image-editor').cropit();
        $('form').submit(function() {
           var imageData = $('.image-editor').cropit('export');
           $('.hidden-image-data').val(imageData);
           var formValue = $(this).serialize();
           $('#result-data').text(formValue);
          return false;
        });

        
        $('.image-editor-test').cropit();
        $('form#test').submit(function() {
           var imageData = $('.image-editor-test').cropit('export');
           $('.hidden-image-data-test').val(imageData);
           var formValue = $(this).serialize();
           $('#result-data-test').text(formValue);
          return false;
        });

      });

Please someone give me little demo about multiple preview with diffrent configuration, thanks

Best Regards

Freddy Sidauruk