1

I'm trying to implement a call to a Javascript function that appears within a Gridview in each row. The code produces a button that can be clicked and brings up an Image Editor instance (Aviary by Adobe).

Because I don't have unique variable names then the same image is appearing each time, if I try to do this on a standalone page and change the Javascript variable names for each image the code works so I'm not sure what to do as I don't know how to make unique variable references.

I can't include the document.getElementByID parts inline as parameters to the function because I can't escape the single quotes.

The 3 javascript variables are

editImageControl editImageURL editImageFilename

<asp:TemplateField HeaderText="Edit Photo">
    <ItemTemplate>

        <asp:Image ID="editImage" runat="server" ImageUrl='<%# "http://images.foo.com/" & Eval("filename") %>' CssClass="noDisplay" />
        <script>
            var editImageControl = document.getElementById('<%# DirectCast(Container, GridViewRow).FindControl("editImage").ClientID%>');
            var editImageURL = document.getElementById('<%# DirectCast(Container, GridViewRow).FindControl("editImage").ClientID%>').src;
            var editImageFilename = '<%# Eval("filename") %>';
        </script>

        <!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
        <p><input type='image' runat="server" src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor(editImageControl, editImageURL, editImageFilename);" /></p>

    </ItemTemplate>
</asp:TemplateField>
Philip Pittle
  • 11,821
  • 8
  • 59
  • 123
Scott Jackson
  • 95
  • 8
  • why dont you this keyword to pass as parameter to function ,in that way,u can also reach the img id – sakir Nov 28 '14 at 12:34
  • There's definitely nicer ways to do it, but adding the `RowIndex` to end of the variables might be a quick fix, e.g. `var editImageURL<# DirectCast(Container, GridViewRow).RowIndex #> = document...` – Rhumborl Nov 28 '14 at 12:35
  • I can't use that inline when I'm passing in the names into the launchEditor function thought Rhumborl Sakir - I'm not sure what you mean sorry? – Scott Jackson Nov 28 '14 at 12:40

1 Answers1

1

When you bind editImageControl use Id instead of ClientId. Id will give you a very long and cumbersome id, but it will be unique for every element (it's the full path for the control within the page's control tree).

  var editImageControl = document.getElementById(
        '<%# DirectCast(Container, GridViewRow).FindControl("editImage").Id%>');

Another option is to set the editImage's ClientId when you define the control. This way JavaScript can access it correctly. I'm going to assume that filename is unique and is valid for storing as an html element's id (you might need to remove any path seperator or file extensions characters for this to work).

 <asp:Image ID="editImage" runat="server" ClientID='<%#Eval("filename")%>'
      ImageUrl='<%# "http://images.foo.com/" & Eval("filename") %>' 
      CssClass="noDisplay" />

Then you can use the same logic to set editImageControl:

var editImageControl = <%#Eval("filename")%>;
Philip Pittle
  • 11,821
  • 8
  • 59
  • 123