Image is not displayed in a Modal Pop Window using javascript and asp.net

StackOverflow https://stackoverflow.com/questions/17859469

Pergunta

Basically, I am trying to develop a ASPX page where the user will be able to upload an image, then display it in a modal pop window and crop it if required.

If I display the image outside of pop window it works completely fine, but if I try to display inside of the pop window the image is not displayed. However, I have noticed if I keep the image there and remove <asp:Image ID="imgCrop" from the javascript below, the image is displayed and off course it will not allow me to crop it.

Here is the javacripts I use to display the modal popwindow and set the crop settings: 

            <head runat="server">
                <title>Crop Image</title>
                <link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
                <script type="text/javascript" src="Scripts/jquery.Jcrop.js"></script>


                <script type="text/javascript" src="scripts/jquery.helper.js" ></script>
                <link href="styles/style.css" rel="stylesheet" type="text/css" />

                <script type="text/javascript">
                    jQuery(document).ready(function () {
                        jQuery('#imgCrop').Jcrop({
                            onSelect: storeCoords
                        });
                    });

                    function storeCoords(c) {
                        jQuery('#X').val(c.x);
                        jQuery('#Y').val(c.y);
                        jQuery('#W').val(c.w);
                        jQuery('#H').val(c.h);
                    };
                </script>
            </head>

here is the definition of modal pop window and where I want to see the image to be cropped in <asp:Image ID="imgCrop"

            <input class="button_popup" id="btnShowModalDiv" onclick="$('#divSimplePopup').showModal(); return false;" type="submit" value="Show Modal Div"/>

                <div id="divSimplePopup" class="popup" style="display: none; width: 350px;">
                    <div class="container">
                        <div class="header">
                            <span id="lblPopupHeader" class="msg">Simple Popup Header</span>
                            <a id="btnClosePopup" class="close" onclick="$('#divSimplePopup').hideModal(); return false;" ></a>
                        </div>
                        <div>
                            <div class="body" style="height: 100px; overflow: auto;">

                            <asp:Panel ID="pnlCrop" runat="server" Visible="false">
                                <asp:Image ID="imgCrop" 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:Button ID="btnCrop" runat="server" Text="Crop" OnClick="btnCrop_Click" />
                           </asp:Panel>    
                            </div>
                            <div class="footer">
                                <input class="button_popup" id="btnOK" style="width: 40px;" type="submit" value="OK"/>
                                <input class="button_popup" id="btnCancel" onclick="$('#divSimplePopup').hideModal(); return false;" type="submit" value="Cancel"/>
                            </div>
                        </div>
                    </div>
                </div>

source code and references: http://geekswithblogs.net/vladimirl/archive/2009/12/20/jquery-simple-modal-plugin.aspx http://supershope.com/tuvianblog/cropimage.zip

Does anyone has any hint?

Foi útil?

Solução 

<asp:Image ID="imgCrop" runat="server" />

your image have runat="server" so it may have different ID when it will be rendered.

so you need to have following in your page.

jQuery(document).ready(function () 
 {
   jQuery('#<%= imgCrop.ClientID %>').Jcrop({
     onSelect: storeCoords
   });
 });

Apart from that you've visible="false" on your panel as shown in below code:

  <asp:Panel ID="pnlCrop" runat="server" Visible="false">

So whole panel won't be rendered and your jquery code won't work. Rather use style="display:none", panel will get rendered and so the image will be and your plugin will work.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top