Jquery loads only after F5 in IE

Question

I am using Jcrop jQuery to crop an image in an MVC3 application.

The following is my JavaScript function:

    jQuery(function ($) {
    $('#imgLab').Jcrop(
        {
            onChange: showCoords,
            onSelect: coordsSelected,
            onRelease: clearCoords
        }
        );
});

Image ID is 'imgLab'.

<img id="imgLab" src="@ViewBag.ObjLabTypeMaster.TopologyImagePath" alt="Lab" width="500" height="450" />

Image src path is coming from database.

Now this works fine in FF, Safari and Chrome. In IE it only works after I press F5. Can anyone tell me what is wrong in code?

Answer 1

You could try adding 'defer' to your script tag:

<script defer>
    // Your code
</script>

Or, you could try waiting until the DOM is ready:

$(document).ready(function(){

    $('#imgLab').Jcrop({
        onChange: showCoords,
        onSelect: coordsSelected,
        onRelease: clearCoords
    });

});

hth

Answer 2

have to set AllowSelect:true for IE

jQuery(function ($) {

        $('#imgLab').Jcrop(
        {
            allowSelect: true,
            //onChange: showCoords,
            //                onSelect: coordsSelected,
            onRelease: clearCoords,
            onDblClick: opendetails
        }, function () {
            Jcrop_Api = this;
        });
});

Answer 3

I don't know but you could try this and if it doens't work better why don't you ignore IE and say the page is not available in IE or all feature's aren't avaible, or perhaps you could auto reload the page automatically if the person is using IE

<script>
        $(document).ready(function() {
            $('#imgLab').Jcrop(function() {
                onChange: showCoords,
                onSelect: coordsSelected,
                onRelease: clearCoords
            });
        });
</script>

And to autoreload the page use following code,

<meta http-equiv="refresh" content="30" />
<!-- content being the secounds before reload -->

I'm sure you can add that or not add it with some PHP code.