Set and change Jcrop image with an ajax query

Question

I just want to use Jcrop on an image that is obtained and changes with an ajax query. But I don't find the way for this script to work. At this moment my script looks like this:

 <script>
    $(function () {

        function Jcrop_show_coords(c) { 
            $('#roi_X1').val((c.x).toFixed(1));
            $('#roi_Y1').val((c.y).toFixed(1));
            $('#roi_X2').val((c.x2).toFixed(1));
            $('#roi_Y2').val((c.y2).toFixed(1));
        };

        var jcrop_api; // Holder for the API
        $('#img_ref').Jcrop({
            trueSize: [100, 100], 
            setSelect:   [1.0, 1.0, 99.0, 99.0],
            onChange: Jcrop_show_coords,  
            onSelect: Jcrop_show_coords
        },function(){
            jcrop_api = this;
        });

        function get_img() {
            $.ajax({                                      
                url: '/ajax/get_img.php',
                type: "POST",
                data: {  idRef: $("#idRef").val() },
                dataType: 'json',
                success: function(resp) {
                    jcrop_api.setImage(resp.img);
                }
            });
        };

        $("#submit_data").on('click', function(){ 
            get_img();
        });
    });
</script>

And firebug says that jcrop_api is undefined in the line:

jcrop_api.setImage(resp.img);

Any ideas about how to make it work?

http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Musa, Jul 23 '13 at 18:53
Are you not having a timing issue similarly to http://stackoverflow.com/questions/17653117/using-jcrop-and-jquery-to-crop-images-using-from-jsp-url-based-image-source-dy — Trevor Gowing, Jul 24 '13 at 07:21
I assume that you are following the JCrop documentation, if not check this out http://deepliquid.com/content/Jcrop_API.html — Trevor Gowing, Jul 24 '13 at 07:25

score 0 · Answer 1 · answered Jul 23 '13 at 19:29

In Html

 <img src="#" id="img_ref"/>

In JS

   function get_img() {
        $.ajax({                                      
            url: '/ajax/get_img.php',
            type: "POST",
            data: {  idRef: $("#idRef").val() },
            dataType: 'json',
            success: function(resp) {
                $("#img_ref").attr("src",resp.imgpath);
                $('#img_ref').Jcrop({
                    trueSize: [100, 100], 
                    setSelect:   [1.0, 1.0, 99.0, 99.0],
                    onChange: Jcrop_show_coords,  
                    onSelect: Jcrop_show_coords
               });
            }
        });
    };

    $("#submit_data").on('click', function(){ 
        get_img();
    });

I already tried this an it doesn't change the image if I call the ajax query again. — Medical physicist, Jul 24 '13 at 05:08

Set and change Jcrop image with an ajax query

1 Answers1