Search code examples
jquerytwitter-bootstrapjcrop

JCrop integration with dynamic image dowloaded

I'm trying to integrate JCrop into a modal of bootstrap. Despite this detail, it seems that the problem resides in the fact that the image is being downloaded "dynamically". I mean:

1) The form is submitted by AJAX:

$('#postFileForm').ajaxForm({ success: afterPost });

2) The 'afterPost' function is being called correctly. This function has as parameter the returned text from the server:

function afterPost(responseText, statusText, xhr, $form) {
    $(".downloadedContent").html(responseText);
    $("#cropbox").Jcrop();
    ...
}

3) This text is returned from server:

<img src='xxx' alt='yyy' id='cropbox' />

I assume that, when I insert via html jQuery method the image is being added to the DOM and I can work with it. If I debug with Chrome just after the moment of inserting the image, it can be normally retrieved by jQuery:

$("#cropbox").attr('src') //returns the source, f.e

But the cropping doesn't work. It seems that something happens because the style attribute it's like:

style='display:none; visibility:hidden; width:...'

I thought that it may be something related to css (according to the fact that I'm using it with Bootstrap) but if I remove the part where the image is dynamically downloaded and I just put it his place everything works right.

Any help will be greatly appreciated! Thanks!

Solution

  • Please, excuse me.

    I want to apologize with all of you for wasting your time :). JCrop binds his controls with the first available element that the jQuery selector returns.

    What was happenning in this case it's that I had the same class in two places, and I wasn't pointing it in the selector.

    $(".downloadedContent").html(responseText) must be something like $("#someDiv .downloadedContent).

    JCrop was attaching to a hiden div, and that was all the story.

    Thanks for your help.