Question

I’m making an ajax image upload and cropper using imageareaselect. The file gets uploaded and echo’s into the page, which in turn should trigger the imgareaselect function.
The function works when i write this directly in to the document :

<div id="PhotoPrev"><img src="/uploads/image.jpeg ?>" alt="Photo Preview" id="photo" name="photo" /></div>

but when the image gets loaded through ajax it does’nt.
So i’m thinking i need a .live function for it, but struggling with how to.

this is my script:

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });

$('#endre').click(function(){
$('.cropform').fadeIn();
$('#photoimg').fadeIn();
$("#endre").fadeOut();
});
});
$('#photoimg').live('change', function() { 
$("#thumbs").html('');
showLoader();               
$("#cropimage").ajaxForm({
target: '#thumbs'
}).submit();hideLoader();
});

Any pointers greatly appreciated on how to trigger areaselect after ajax uploads and echoes the image.

Answer 1

Have you tried putting everything inside $(document).ready()

$(document).ready(function() {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });

    $('#endre').click(function() {
        $('.cropform').fadeIn();
        $('#photoimg').fadeIn();
        $("#endre").fadeOut();
    });

    $('#photoimg').live('change', function() {
        $("#thumbs").html('');
        showLoader();
        $("#cropimage").ajaxForm({
            target: '#thumbs'
        }).submit();
        hideLoader();
    });
});