Jcrop Destroy is not working

Jak

Member

858 Points

132 Posts

I'm trying to implement zoom-in and zoom-out and trying to reload jcrop by destroying it as:

$(function(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $('#imgCropImage').Jcrop({
       aspectRatio: 1,
       onSelect: updateCoords,
       boxWidth: scalex, 
       boxHeight: scaley
   });

   $('#imgtarget').click(function() {
      myJcrop.destroy();
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $('#imgCropImage').Jcrop({
          aspectRatio: 1,
          onSelect: updateCoords,
          boxWidth: scalex, 
          boxHeight: scaley
      });
   });

});

But it's not working. Getting error message in console as "destroy is not a function"

jquery crop

Views: 1286
Total Answered: 2
Total Marked As Answer: 1
Posted On: 04-Jan-2020 02:35

Share:

Answers

Smith

None

2568 Points

74 Posts

Maybe you can try something like:

$(function(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $.Jcrop('#imgCropImage',{
       aspectRatio: 1,
       onSelect: updateCoords,
       boxWidth: scalex, 
       boxHeight: scaley
   });

   $('#imgtarget').click(function() {
      myJcrop.destroy();
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $.Jcrop('#imgCropImage',{
          aspectRatio: 1,
          onSelect: updateCoords,
          boxWidth: scalex, 
          boxHeight: scaley
      });
   });

});

Posted On: 04-Jan-2020 03:03

beginer

Member

1328 Points

43 Posts

I was facing same issue resolved by removing Jcrop from element as:

if ($('#imgCropImage').data('Jcrop')) {
   $('#imgCropImage').data('Jcrop').destroy();
}

So you can try following:

$(function(){

   var scalex = $('#scalex').val();
   var scaley = $('#scaley').val();
   var myJcrop = $.Jcrop('#imgCropImage',{
       aspectRatio: 1,
       onSelect: updateCoords,
       boxWidth: scalex, 
       boxHeight: scaley
   });

   $('#imgtarget').click(function() {
      if ($('#imgCropImage').data('Jcrop')) {
         $('#imgCropImage').data('Jcrop').destroy();
        }
      scalex = $('#scalex').val();
      scaley = $('#scaley').val();
      myJcrop = $.Jcrop('#imgCropImage',{
          aspectRatio: 1,
          onSelect: updateCoords,
          boxWidth: scalex, 
          boxHeight: scaley
      });
   });

});