How to activate jcrop selection after ajax load

Question

I am using Jcrop in my project. The problem is not critical, but it would be better if I could fix it.

I can upload an image through an ajax request (not jQuery ajax), and the image can load onto the page after loading without refreshing the page. So far, everything is working fine. After uploading an image to a page, Jrop is not activated without refreshing the page. Here is the Jcrop script activator:

jQuery(window).load(function(){ jQuery('#cropbox').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 3/4 }); }); 

I'm not sure if this is important, this script is not inside $ (document) .ready (function () {}.

I tried to start Jcrop using $ ('# cropbox'). load and $ ('# cropbox'). Click functions instead of jQuery (window) .load (function () {}, but nothing happened.

Do you have any ideas? Is it possible to activate Jcrop immediately after uploading the image to the page using an ajax request without updating the browser?

Here is the use of Jcrop:

 // Remember to invoke within jQuery(window).load(...) // If you don't, Jcrop may not initialize properly $(window).load(function(){ var imgWidth = $('#cropbox').width(); var imgHeight = $('#cropbox').height(); $('#cropbox').Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 3/4, setSelect: [ ((imgWidth/2)-60), 60, ((imgWidth/2)+60), 220 ], addClass: 'custom', bgColor: 'yellow', bgOpacity: .8, sideHandles: false }); }); 

And the image upload button:

 <button onclick="ajaxUpload(this.form,'http://www.yemeklog.com/ajax/ajaxupload.php?filename=filename&amp;maxSize=9999999999&amp;maxW=400&amp;fullPath=http://www.yemeklog.com/images/users/160/&amp;relPath=../images/users/160/&amp;colorR=120&amp;colorG=120&amp;colorB=120&amp;maxH=600','upload_area','&lt;img src=\'http://static.yemeklog.com/images/ajax-bar-loader.gif\' width=\'220\' height=\'19\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; An error occured. Please contact.'); return false;">Upload Image</button> 

And the ajaxupload.js file:

 function $m(theVar){ return document.getElementById(theVar) } function remove(theVar){ var theParent = theVar.parentNode; theParent.removeChild(theVar); } function addEvent(obj, evType, fn){ if(obj.addEventListener) obj.addEventListener(evType, fn, true) if(obj.attachEvent) obj.attachEvent("on"+evType, fn) } function removeEvent(obj, type, fn){ if(obj.detachEvent){ obj.detachEvent('on'+type, fn); }else{ obj.removeEventListener(type, fn, false); } } function isWebKit(){ return RegExp(" AppleWebKit/").test(navigator.userAgent); } function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){ var detectWebKit = isWebKit(); form = typeof(form)=="string"?$m(form):form; var erro=""; if(form==null || typeof(form)=="undefined"){ erro += "Hata kodu: 1.\n"; }else if(form.nodeName.toLowerCase()!="form"){ erro += "Hata kodu: 2.\n"; } if($m(id_element)==null){ erro += "Hata kodu: 3.\n"; } if(erro.length>0){ alert("Yükleme esnasında hata oluştu:\n" + erro); return; } var iframe = document.createElement("iframe"); iframe.setAttribute("id","ajax-temp"); iframe.setAttribute("name","ajax-temp"); iframe.setAttribute("width","0"); iframe.setAttribute("height","0"); iframe.setAttribute("border","0"); iframe.setAttribute("style","width: 0; height: 0; border: none;"); form.parentNode.appendChild(iframe); window.frames['ajax-temp'].name="ajax-temp"; var doUpload = function(){ removeEvent($m('ajax-temp'),"load", doUpload); var cross = "javascript: "; cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);"; $m(id_element).innerHTML = html_error_http; $m('ajax-temp').src = cross; if(detectWebKit){ remove($m('ajax-temp')); }else{ setTimeout(function(){ remove($m('ajax-temp'))}, 250); } $('#ajax_image_container').slideDown('slow'); } addEvent($m('ajax-temp'),"load", doUpload); form.setAttribute("target","ajax-temp"); form.setAttribute("action",url_action); form.setAttribute("method","post"); form.setAttribute("enctype","multipart/form-data"); form.setAttribute("encoding","multipart/form-data"); if(html_show_loading.length > 0){ $m(id_element).innerHTML = html_show_loading; } form.submit(); } 

Answer 1

You can call jcrop on the image after receiving an ajax request.

 $.ajax({ url: 'ajax/test.html', success: function(data) { var $myImage = $("<img></img>", { src: data.img, }).appendTo('#cropbox'); $myImage.Jcrop({ onChange: showPreview, onSelect: showPreview, aspectRatio: 3/4 }); } }); 

Answer 2

Can you host your ajax script for this? You must execute jcrop after the code to place the image in #cropbox .