cannot get jcrop object for release() on ajax jquery

Question

Goodmorning everyone,

i fighting against this problem for now 3 hours and i can't find a way to win XD i have an ajax upload that on success will open a twitter bootstrap modal window that will load the image, initialize the jcrop and then on close generate a thumb base on the selection.

and this works fine... the real trouble is that i need in the modal the release of the selection and here's the catch i've followed the instruction on the jcrop website but i can't get out.

now that i have explained the problem is time for some code :D

var FileUploader_img_frontale = new qq.FileUploader({
    'element':document.getElementById("img_frontale"),
    'debug':false,
    'multiple':false,
    'action':'http://url.com/upload',
    'allowedExtensions':['jpg','png','jpeg','gif'],'sizeLimit':10485760,
    'onComplete':function(id, fileName, responseJSON){ 
          $('#pbar_img_frontale').css('display','none');
      $('#img-front-body').html('<img id="cropbox1" src="url.com/images/tmp/b444ac06613fc8d63795be9ad0beaf55011936ac/'+responseJSON.filename+'" style="max-width:400px;max-height:400px;"/>');

          function showCoordsFront(c){       $('#_opera_img_frontale').val(responseJSON.filename+'|'+c.x+'|'+c.y+'|'+c.x2+'|'+c.y2+'|0'); }
            $('#cropbox1').Jcrop({
                boxHeight: 400,
                boxWidth:400,
                trueSize: [responseJSON.width,responseJSON.height],
                allowResize: true,
                aspectRatio: 4/3,
                onChange: showCoordsFront,
                onSelect: showCoordsFront,
            },function(){ jcrop1 = this; });
            $('#_opera_img_frontale').val(responseJSON.filename);
            front_uploaded=1;
            $('#modal_img_front').modal('toggle');
         },'onProgress':function(id, fileName, loaded, total){ $('#pbar_img_frontale').css('display','block'); $('#bar_img_frontale').css('width',((loaded*100)/total)+'%'); },'params':{'PHPSESSID':'400659255ef857e043b5ab1651406f50','YII_CSRF_TOKEN':'c8248bc34b5371edf162292691dbcf23dc1e697a'}}); 

this is the jquery ajax for the uploading file as you can see i've put the

 function(){ jcrop1 = this; }

needed for grabbing the obj but while it works when i don't upload the image via ajax i don't understand what to do with it cause the release button get jcrop1 as undefined on jquery ready

var jcrop1;
$("#jcrop1-release").click(function(){
   jcrop1.setSelect([0,0,0,0]);
   jcrop1.release();
});

anyone can help me?

thanks in advance

Fabio

Answer 1

ok Guys i've solved this... the problem was in the framework management of the script.. it will put multiple instance of $(document).ready() so one var was in one and the ajax in another... so the solution was to bypass the document.ready and put the global variable outside and it's done it works!!!

Fabio