Jcrop not initializing on a loaded image

Question

I'm attempting to use Jcrop to make part of an image selectable, to retrieve particular co-ordinates. As it stands, I am loading information relating to an image using Ajax, then creating the image tag in Javascript and feeding the information in. I then call a function which SHOULD initialize Jcrop to make the image selectable. The PHP side is definitely coming back with the correct data, the image is being created with the correct source, and the 'setImg' function is registering that it is being called (the window alert pops up).

Essentially, I'm not entirely sure what I'm doing wrong regarding Jcrop. I've followed a couple of tutorials about initializing it, which hasn't really resulted in anything. The image remains as default.

About the variables: 'pID' and 'cID' are page and comic IDs of the 'page' image being looked for by the Ajax function, then created in the result.

Javascript:

<script>

        function editPage(pID, cID)
        {
            $.ajax({
                url : "editPage.php",
                type : "get",
                data: ({'pageID': pID}),

                async: false,
                success : function(result) 
                {
                    document.getElementById("soloPage").innerHTML="";
                    var getImg = result[0].pageLocation;
                    var out = "<br><p><img name ='" + ('solopgnm' + result[0].pageNum) + "' id='solopgid' src='" + result[0].pageLocation + "' width='95%;' ></p>";

                    document.getElementById("soloPage").innerHTML=out;
                    document.getElementById("editPageTagID").innerHTML=("Currently editing: Page " + result[0].pageNum);

                    $("#divEditComics").hide();
                    $("#divEditPage").show();

                    setImg();

                },
                error: function() 
                {
                    connectionError();
                }
            });


        }

    </script>

    <script>

        function setImg()
        {
            window.alert("Function called.");

            jQuery(window).load(function(){

                jQuery('#solopgid').Jcrop({
                    onChange: showCoords,
                    onSelect: showCoords
                });
            });
        }

    </script>

Any help or pointers in the right direction of study would be appreciated (though I have attempted to follow the documentation to little avail. Apologies if I missed something simple).

Answer 1

Try removing the 'jQuery(window).load(..' portion inside the setImg function. The window load event has already fired so the encased code wont execute.

Its hard to know exactly what you are trying without a complete example but here is a quick and dirty jsfiddle example that may help. Based on code provided and a bunch of assumptions.

 result = [{ pageLocation: "http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg", pageNum: '2' }]; function editPage() { document.getElementById("soloPage").innerHTML = ""; var getImg = result[0].pageLocation; var out = "<br><p><img name ='" + ('solopgnm' + result[0].pageNum) + "' id='solopgid' src='" + result[0].pageLocation + "' ></p>"; document.getElementById("soloPage").innerHTML = out; setImg(); } function showCoords(c) { $('#output').text(cx + ', ' + cy); } function setImg() { //following load line commented out // jQuery(window).load(function(){ jQuery('#solopgid').Jcrop({ onChange: showCoords, onSelect: showCoords }); // }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script> <div> <div id="soloPage"></div> <div id="output"></div> <button type="button" onclick="editPage()">Click to Load Image</button> </div>