Как активировать выбор Jcrop после загрузки ajax

Question

Я использую Jcrop в своем проекте. Проблема не является критической, но было бы лучше, если бы я мог ее исправить.

Я могу загрузить изображение с помощью ajax-запроса (не Jquery ajax), и изображение может быть загружено на страницу после загрузки без обновления страницы. До сих пор все отлично работает. После загрузки изображения на страницу Jrop не становится активным без обновления страницы. Вот скрипт активатора Jcrop:

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

Я не уверен, что это важно, этот скрипт не находится внутри $ (document) .ready (function () {}.

Я попытался вызвать Jcrop с помощью функций $ ('# cropbox'). Load и $ ('# cropbox'). Click вместо функции jQuery (window) .load (function () {}, но ничего не произошло.

Есть идеи? Возможно ли активировать Jcrop сразу после загрузки изображения на страницу через ajax-запрос без обновления браузера?

Вот использование 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

                });

            });

И кнопка загрузки изображения:

<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>

И файл ajaxupload.js:

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

Вы можете вызвать jcrop для изображения после получения запроса AJAX.

$.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

Можете ли вы опубликовать свой сценарий ajax для этого? Вы должны быть в состоянии выполнить jcrop после кода, чтобы поместить изображение в #cropbox.