Question

I have made a user control that allows an image to be uploaded and then cropped, but when I have several of these controls on one form, only the last one added will work correctly. The issue is the function storeCoords, has no effect on the X,Y, W and H hidden fields, thus when the crop ‘rubber band’ is moved, these values do not change. With the final control added, as the ‘rubber band’ is moved, the hidden fields are updated, and everything then works as expected. Why when I have several of these controls on one page does only the last one’s javascript work as expected.

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>
<link href="/Controls/ImageUploadAndCrop/CSS/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    $(window).on('load', function ()
    {

        var elem = $('#<%= CropImage.ClientID %>'),
            boxWidth = elem.width(),
            boxHeight = elem.height();

        elem.Jcrop({
            onSelect: storeCoords,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

        $('#<%=CropButton.ClientID%>').click
        (
            function ()
            {
                var cropImg = $('.jcrop-holder img');

                $('#<%= ImgWidth.ClientID %>').val(cropImg.width());
                $('#<%= ImgHeight.ClientID %>').val(cropImg.height());
            }
        );
    });

        function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }
 </script>
<div>
    <asp:Panel ID="UploadPanel" runat="server">
        <asp:FileUpload ID="Upload" runat="server" />
        <br />
        <asp:Button ID="UploadButton" runat="server" OnClick="UploadButton_Click" Text="Upload" />
        <asp:Label ID="ErrorLabel" runat="server" Visible="false" />
    </asp:Panel>
    <asp:Panel ID="CropPanel" runat="server" Visible="false">
        <asp:Image ID="CropImage" runat="server"/>
        <br />
        <asp:HiddenField ID="X" runat="server" />
        <asp:HiddenField ID="Y" runat="server" />
        <asp:HiddenField ID="W" runat="server" />
        <asp:HiddenField ID="H" runat="server" />
        <asp:HiddenField ID="ImgWidth" runat="server"/>
        <asp:HiddenField ID="ImgHeight" runat="server"/>
        <asp:Button ID="CropButton" runat="server" Text="Crop" OnClick="CropButton_Click" />
    </asp:Panel>
    <asp:Panel ID="CroppedPanel" runat="server" Visible="false">
        <asp:Image ID="CroppedImage" runat="server" />
    </asp:Panel>
</div>

Answer 1

I see few problems with this control:

1.

 var elem = $('#<%= CropImage.ClientID %>'),
            boxWidth = elem.width(),
            boxHeight = elem.height();

Shouldn’t these lines to be followed by a semi-colon “;” and not a comma? But maybe is a typo.

2.

Because you are using this control in several places of the page, you need to take care of the “duplicate” appearances of any JavaScript code:

For example the following <script> tag will appear every time you the control is added to the page.

<script src="/Controls/ImageUploadAndCrop/Javascript/jquery.Jcrop.min.js" type="text/javascript"> </script>

This however won’t do anything bad to functionality (I think?!), but the following function will do for sure, because the JavaScript will have more copies of the same function with the same arguments. Which one is considered?

function storeCoords(c)
        {
            $('#<%= X.ClientID %>').val(c.x);
            $('#<%= Y.ClientID %>').val(c.y);
            $('#<%= W.ClientID %>').val(c.w);
            $('#<%= H.ClientID %>').val(c.h);
        }

A quick fix would be:

 elem.Jcrop({
            onSelect: storeCoords<%= CropImage.ClientID %>,
            boxWidth: boxWidth,
            boxHeight: boxHeight
        });

And

function storeCoords<%= CropImage.ClientID %>(c) { ... }

In this way you’ll have unique function names.

However ASP .Net has mechanisms to handle user controls which use JavaScript. See ClientScriptManager